vue - vue中的publicPath讲解

news2024/11/23 18:26:56

vue.config.js里面的publicPath是部署应用包时的基本 URL;
从 Vue CLI 3.3 起baseUrl已被publicPath替代;
如果想要了解vue的环境变量 process.env 可以阅读这篇文章: vue中的process.env.NODE_ENV讲解

1,publicPath

publicPath是部署应用包时的基本 URL;默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 (‘’) 或是相对路径 (‘./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径;但相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:

  • 当使用基于 HTML5 history.pushState 的路由时;
  • 当使用 pages 选项构建多页面应用时。

2,哪里会用到publicPath

在vue中的项目中一般静态文件路径要使用publicPath 和项目打包部署时都会用到publicPath;


2.1 静态文件使用publicPath

如果你的项目里面的静态文件都放在public文件中,那么使用的时候要使用publicPath这个变量,防止打包后静态文件找不到;
你需要通过绝对路径来引用它们。因为:任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack;

下图是vue-cli官网给出的使用说明:链接
注意:这里用到了process.env.BASE_URL;下面会解释的

在这里插入图片描述

2.2 项目打包使用publicPath

如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

这里判断是否是生产环境 如果是那么前面的部署路径加上 /app/;如果不是 默认使用根路径 / ;
生产环境经常配合前端服务器的中nginx代理使用;

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}

3,publicPath和process.env.BASE_URL

1,如果你在vue.config.js里面设置了publicPath:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',
}

那么process.env.BASE_URL 其实就是 publicPath;不信你可以在组件中console.log(process.env.BASE_URL)打印出来;
BASE_URL会被vue.config.js中 publicPath变量覆盖。

2,如果没有在vue.config.js里面设置publicPath;那么process.env.BASE_URL默认就是根路径 :/ ;

3,在vue路由的配置项中也会用到process.env.BASE_URL:

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
})

mode history 代表路由不再显示#,会像如下形式:localhost:8080/user/list;
主要是base属性 代表着是基本的路由请求的路径:

如:base: ‘/app/’
说明项目部署在app目录下,那么vue所有的路由前面都会自动加上: /app

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/100539.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

七、ref引用与数组的常用方法

一、ref 引用 1.1、什么是 ref 引用 ref 用来辅助开发者在不依赖于jQuery的情况下,获取 DOM 元素或组件的引用。 每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的$refs指向…

语音识别芯片LD3320介绍

语音识别芯片LD3320简介 LD3320 芯片是一款“语音识别”芯片,集成了语音识别处理器和一些外部电路,包括AD、DA 转换器、麦克风接口、声音输出接口等。LD3320不需要外接任何的辅助芯片如Flash、RAM 等,直接集成在LD3320中即可以实现语音识别/声控/人机对…

黑*头条_第6章_kafka及异步通知文章上下架(新版)

黑*头条_第6章_kafka及异步通知文章上下架(新版) 文章目录黑*头条_第6章_kafka及异步通知文章上下架(新版)1)自媒体文章上下架2)kafka概述3)kafka安装配置4)kafka入门5)kafka高可用设计5.1)集群5.2)备份机制(Replication)6)kafka生产者详解6.1)发送类型6.2)参数详解…

Linux|Ubuntu-18.04上安装discord(二进制安装)

前言: Discord是由两个沉迷游戏的玩家为了解决游戏种玩家交流问题而开发的一个语音聊天软件,它从游戏社交起家。 起初,Discord被定义为“永远在线的聊天室”,专门为游戏玩家设计,可以简单快捷的加入或退出某个群聊进…

【图像去雾】颜色衰减先验图像去雾【含Matlab源码 2036期】

⛄一、颜色衰减先验去雾算法简介 2015年Zhu等的颜色衰减先验去雾算法利用颜色衰减先验建立有雾图像的景深模型, 采用有监督学习的方式得到模型的参数, 结合大气散射模型得到去雾图像。具体内容如下: 1 大气散射模型 Zhu等的颜色衰减先验去雾算法利用计算机视觉和图形图像领域…

大开眼界的4款电脑软件,其中3款大小不到10M,功能却逆天

闲话少说,直上狠货,大开眼界。 1、Ocam录屏 Ocam是一款完全免费的录屏软件,大小仅有9M,功能却非常强大,界面简洁,操作简单一键录制,4k分辨率视频录制时,即便办公电脑配置不高&#x…

我国海洋油气行业勘探力度加大 整体探明程度有待提高 未来储量产量增长潜力仍很大

1、我国海洋油气资源储量情况 根据观研报告网发布的《2022年中国海洋油气市场分析报告-市场发展监测与发展动向预测》显示,根据全国第四次油气调查数据,海洋石油剩余技术可采储量占中国石油剩余技术可采储量的34%;海洋天然气剩余技术可采储量…

二叉搜索树详解

1.二叉搜索树的概念 二叉搜索树又称二叉排序树,它或者是一颗空树,或者是具有以下性质的二叉树: 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值若它的右子树不为空,则右子树上所有的节点的值都大于根节点…

执行pip安装时,如何解决:Unknown or unsupported command install

目录 解决方案1:卸载LoadRunner——显然是不可行的 解决方案2:全路径执行pip 解决方案3:镜像 解决方案4:镜像更新 遇到这种情况一般都是因为已经安装了LoadRunner导致电脑上同时安装了多个pip,执行时,系…

LabVIEW如何以编程方式获取克隆VI名称?

LabVIEW如何以编程方式获取克隆VI名称?如何使用克隆VI名称关闭特定的克隆VI? 调用正在运行的VI服务器引用。 放置一个调用节点,然后选择“打开”前面板>>。 使用属性节点检查VI是否为克隆VI>>。 使用属性节点>>克隆名称…

Java安全--CC2

cc2其实都是建立在我们写的基础之上,只不过路走的不一样罢了,我们可以看一下CC2是怎么走的,我用颜色标出了: 其实就是之前都学过的几个类。 前面代码都和CC4一样 public class CC2 {public static void main(String[] args) thro…

2023春招面试题:Java并发相关知识

1.基础知识回顾 1.1 什么是多线程? 在没有线程的年代,在同一个进程中,程序的处理流程都是顺序的,下一个流程的开始必须等待上 一个流程的结束,如果其中某一个流程非常耗时,那么会影响整个流程的处理时间…

学习.NET MAUI Blazor(一)、Blazor是个啥?

先把Blazor放一边,先来看看目前Web开发的技术栈。 注:上图只是为了说明问题,没有任何语言歧视! 这是目前最常用的前后端分离开发模式,这个开发模式需要配备前端工程师和后端工程师。当然了,全栈工程师另当…

GNN Algorithms(2): GCN, Graph Convolutional Network

GCN Algorithm Essence: 传统的卷积运算无法在graph上进行运算,所有借由傅里叶变换Fourier Transformation实现在graph上的卷积运算,得到graph convolution,退出GCN(graph convolutional network)。 Background graph embedding&#xff1…

mysql优化——mycat数据库中间件

文章目录 目录 文章目录 前言 一、mycat原理 二、mycat完成读写分离 2.1搭建MySQL的主从模式 2.2实现读写分离 三、mycat垂直分库 四、水平分表 五、水平拆分表的连表操作 六、全局表 总结 前言 Mycat是数据库中间件,所谓中间件,是一类连接软件组件和应用的计算机软件,以…

CUDA入门和网络加速学习(三)

0. 简介 最近作者希望系统性的去学习一下CUDA加速的相关知识,正好看到深蓝学院有这一门课程。所以这里作者以此课程来作为主线来进行记录分享,方便能给CUDA网络加速学习的萌新们去提供一定的帮助。 1. CUDA中的Stream和Event 1.1 CUDA stream CUDA s…

蓝桥杯C/C++百校真题赛(1期)Day4题解(左孩子右兄弟、作物杂交)

Q1 左孩子右兄弟 f[u]表示以u为根转化而成的二叉树(以下简称二叉树)的最大高度f[u]max(f[ji])cnt[u]−11,ji是u的所有儿子,cnt[u]表示原树中u的儿子个数。因为以u为根的二叉树肯定由u的一个儿子为根的二叉树构成来作为他的左半部假设f[jt]是最大的那个,那…

A Joint Neural Model for Information Extraction with Global Features论文解读

A Joint Neural Model for Information Extraction with Global Features code:BLENDER Lab | Software (illinois.edu)或者GerlinGreen/OneIE: Forked from OneIE: A Joint Neural Model for Information Extraction with Global Features (github.com) paper&…

超宽带UWB无线技术,厘米级测距定位,精准位置确定方案应用

UWB标签和锚点之间的双向测距测量它们的相对距离,这种方法用于例如安全访问应用程序,其中将根据标签设备的接近程度授予访问权限。 UWB不能被简单的中继攻击欺骗,因为它的距离测量不是基于信号强度,而是基于时间,中继…

git初识(四)

rebase(变基) 它能让git提交记录简洁 多个记录整合成一个记录 git rebase -i HEAD~3从最新记录开始依次找3条记录进行合并 git rebase -i 版本号从该版本号开始一直合并到最新记录 在做记录合并时,建议不要和已push到仓库的记录 beyond compare 在git的使用过程…