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