1、打包后資源路徑報(bào)錯(cuò)
通過vue-cli生成的項(xiàng)目借卧,npm run build打包后的文件部署后會(huì)報(bào)錯(cuò)盹憎,找不到樣式文件和js文件。原因是通過webpack和vue-cli編譯的路徑是絕對(duì)路徑铐刘,并且將static默認(rèn)為根路徑陪每。
1578993472(1).jpg
解決方法:
更改config/index.js文件中,build對(duì)象下的assetsPublicPath
由
assetsPublicPath: "/",
更改為:
assetsPublicPath: "./",
則可將編譯路徑更改為相對(duì)路徑镰吵。
2檩禾、背景圖片引用路徑問題
1578992115(1).jpg
樣式中引入的背景圖地址出現(xiàn)錯(cuò)誤,被編譯成
url(static/img/background@3x.706610c.png);
解決方法:
找到build/utils.js疤祭,在ExtractTextPlugin.extract
中添加publicPath: '../../'
屬性
1578992600(1).jpg
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: "vue-style-loader",
publicPath: '../../' // 以dist/static/css下的樣式表為源點(diǎn)盼产,匹配dist/static/img下的圖片資源 編譯結(jié)果為url(../../static/img/background@3x.706610c.png);
});
} else {
return ["vue-style-loader"].concat(loaders);
}