利用vue脚手架生成的代码去打包的时候,通常会发现,css路径丢失的问题。同时如果用了elementui的话,还可能出现字体丢失的情况,通常需要自己手动的将字体文件拷贝到指定的文件夹才能解决问题,但是这样的话,太影响效率。所以需要配置webpack去解决问题。

css路径丢失的解决方法

将config下面的index.js的build下的assetsPublicPath加一个./即可

1
2
3
4
5
6
7
8
9
10
11
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //添加./
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}

elementui 字体路径丢失的解决方法

将build下utils.js下加publicPath即可

1
2
3
4
5
6
7
8
9
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //添加publicPath属性
})
} else {
return ['vue-style-loader'].concat(loaders)
}