利用vue脚手架生成的代码去打包的时候,通常会发现,css路径丢失的问题。同时如果用了elementui的话,还可能出现字体丢失的情况,通常需要自己手动的将字体文件拷贝到指定的文件夹才能解决问题,但是这样的话,太影响效率。所以需要配置webpack去解决问题。
css路径丢失的解决方法
将config下面的index.js的build下的assetsPublicPath加一个./
即可
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即可
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //添加publicPath属性
})
} else {
return ['vue-style-loader'].concat(loaders)
}