当我们通过vue-cli 搭建好项目,并做完项目之后,开开心心的npm run build 之后,
发现项目中的背景图片不见了,蒙圈中….
别懵了,我来拯救你。
首先,我的静态资源目录如下:
首先我们找到/build/webpack.prod.conf.js
文件,并打开。找到output关键词所在的地方
配置代码如下:1
2
3
4
5
6output: {
publicPath: ‘./‘, // 只加入了这一行,其它的未变
path: config.build.assetsRoot,
filename: utils.assetsPath(‘js/[name].[chunkhash].js’),
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)
},
然后第二步:找到/build/utils.js
文件,找到options.extract关键词所在地方
配置如下:1
2
3
4
5
6if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
publicPath: ‘../../‘ // 只加入了这一行
})
这个时候,在重启,npm run build
,
怎么样,妈妈再也不用担心我路径出错了吧。