作者博客：漂小泊的博客
作者主站：小泊随記
原文地址：文章地址
很多同学在Vue项目打包的时候遇到了一些问题，今天说两个常见问题的解决方法。
问题描述
1、背景图片
项目打包后，背景图片引用失败。
找到build文件夹下的utils.js,修改如下位置：
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
将“publicPath”修改为“../../”
2、文件加载失败
项目打包后，文件路径出错。
找到config文件夹下的index.js文件修改如下位置：
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
将“assetsPublicPath”修改为“./”
联系小泊
email：643209899@qq.com
