一、publicPath
publicPath是部署应用包时的基本 URL
- 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。
- 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。
- 例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置
publicPath 为 /my-app/
。
1.1、 publicPath设置为绝对路径
场景:nginx部vue项目
不设置(默认为 publicPath: '/'
) 或者设置 publicPath: '/'
就是绝对路径
// vue.config.js
module.exports = {
publicPath: '/',
}
html中被打包的css和js路径如下
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>vue-manage-system-template-js</title>
<link href=/js/about.62bc742c.js rel=prefetch>
<link href=/css/app.1d486654.css rel=preload as=style>
<link href=/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
<link href=/js/app.a62b0400.js rel=preload as=script>
<link href=/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
<link href=/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
<link href=/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.7a1d5ffa.js></script>
<script src=/js/app.a62b0400.js></script>
</body>
</html>
相当于打包过后的路径上多一个文件夹的名字
1.2、publicPath设置相对路径
publicPath设置为
空字符串''
, 或是'./'
,这样所有的资源都会被链接为相对路径。
这样好处就是打出来的包可以被部署在任意路径,直接在dist打包文件夹就可打开index.html页面
在以下情况下,应当避免使用相对 publicPath:
- 当使用基于
HTML5 history.pushState
的路由时;- 当使用
pages
选项构建多页面应用时。
// vue.config.js
module.exports = {
publicPath: './',
}
html中被打包的css和js路径如下
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=favicon.ico>
<title>vue-manage-system-template-js</title>
<link href=js/about.62bc742c.js rel=prefetch>
<link href=css/app.1d486654.css rel=preload as=style>
<link href=css/chunk-vendors.2ac5db4b.css rel=preload as=style>
<link href=js/app.a62b0400.js rel=preload as=script>
<link href=js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
<link href=css/chunk-vendors.2ac5db4b.css rel=stylesheet>
<link href=css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong></noscript>
<div id=app></div>
<script src=js/chunk-vendors.7a1d5ffa.js></script>
<script src=js/app.a62b0400.js></script>
</body>
</html>
二、哪里会用到publicPath
在vue中的项目中
- 一般静态文件路径要使用publicPath
- 项目打包部署时都会用到publicPath;
2.1、静态文件使用publicPath
如果你的项目里面的静态文件都放在public文件中,那么使用的时候要使用publicPath这个变量,防止打包后静态文件找不到;
你需要通过绝对路径来引用它们。因为:任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack;
链接
2.2、项目打包使用publicPath
如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:
这里判断是否是生产环境 如果是那么前面的部署路径加上 /app/;如果不是 默认使用根路径 / ;
生产环境经常配合前端服务器的中nginx代理使用;
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}
三、publicPath和process.env.BASE_URL
3.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
变量覆盖。
3.2、没有在vue.config.js里面设置publicPath;
那么process.env.BASE_URL
默认就是根路径'/'
;
3.3、在vue路由的配置项中也会用到process.env.BASE_URL:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
mode:history
代表history路由不再显示#
,会像如下形式:localhost:8080/user/list
主要是base
属性代表着是基本的路由请求的路径:
如:base: '/app/'
说明项目部署在app
目录下,那么vue所有的路由前面都会自动加上:/app