webpack打包路径问题

2019-09-29  本文已影响0人  前端一菜鸟

利用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)
}
上一篇 下一篇

猜你喜欢

热点阅读