vue.config.js里面的publicPath是部署應(yīng)用包時(shí)的基本 URL明垢；
從 Vue CLI 3.3起baseUrl已被publicPath替代；
<meta charset="utf-8">
一叠聋、publicPath
publicPath是部署應(yīng)用包時(shí)的基本 URL
- 默認(rèn)情況下茸炒，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如 https://www.my-app.com/艾凯。
- 如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑懂傀。
- 例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/蜡感，則設(shè)置
publicPath 為 /my-app/蹬蚁。
<meta charset="utf-8">
1.1恃泪、 publicPath設(shè)置為絕對(duì)路徑
場(chǎng)景：nginx部vue項(xiàng)目
不設(shè)置(默認(rèn)為 publicPath: '/') 或者設(shè)置 publicPath: '/'就是絕對(duì)路徑
// 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設(shè)置相對(duì)路徑
publicPath設(shè)置為
空字符串'', 或是'./'犀斋，這樣所有的資源都會(huì)被鏈接為相對(duì)路徑贝乎。
這樣好處就是打出來的包可以被部署在任意路徑，直接在dist打包文件夾就可打開index.html頁面
在以下情況下叽粹，應(yīng)當(dāng)避免使用相對(duì) publicPath:
- 當(dāng)使用基于
HTML5 history.pushState的路由時(shí)览效；- 當(dāng)使用
pages選項(xiàng)構(gòu)建多頁面應(yīng)用時(shí)。
// 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>
二虫几、哪里會(huì)用到publicPath
在vue中的項(xiàng)目中
- 一般靜態(tài)文件路徑要使用publicPath
- 項(xiàng)目打包部署時(shí)都會(huì)用到publicPath;
2.1锤灿、靜態(tài)文件使用publicPath
如果你的項(xiàng)目里面的靜態(tài)文件都放在public文件中，那么使用的時(shí)候要使用publicPath這個(gè)變量辆脸，防止打包后靜態(tài)文件找不到但校；
你需要通過絕對(duì)路徑來引用它們。因?yàn)椋喝魏畏胖迷?public 文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制啡氢，而不經(jīng)過 webpack状囱；
下圖是vue-cli官網(wǎng)給出的使用說明：鏈接
注意：這里用到了process.env.BASE_URL;下面會(huì)解釋的
2.2、項(xiàng)目打包使用publicPath
如果你想把開發(fā)服務(wù)器架設(shè)在根路徑倘是，你可以使用一個(gè)條件式的值：
這里判斷是否是生產(chǎn)環(huán)境 如果是那么前面的部署路徑加上 /app/亭枷；如果不是 默認(rèn)使用根路徑 / ;
生產(chǎn)環(huán)境經(jīng)常配合前端服務(wù)器的中nginx代理使用；
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}
三搀崭、publicPath和process.env.BASE_URL
3.1叨粘、vue.config.js里面設(shè)置了publicPath
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',
}
那么process.env.BASE_URL 其實(shí)就是 publicPath;
不信你可以在組件中console.log(process.env.BASE_URL)打印出來；
BASE_URL會(huì)被vue.config.js中 publicPath變量覆蓋门坷。
3.2宣鄙、沒有在vue.config.js里面設(shè)置publicPath；
那么process.env.BASE_URL默認(rèn)就是根路徑'/' ;
3.3默蚌、在vue路由的配置項(xiàng)中也會(huì)用到process.env.BASE_URL：
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
mode:history代表history路由不再顯示#冻晤，會(huì)像如下形式：localhost:8080/user/list
主要是base屬性代表著是基本的路由請(qǐng)求的路徑：
如：base: '/app/'
說明項(xiàng)目部署在app目錄下，那么vue所有的路由前面都會(huì)自動(dòng)加上:/app
