webpack打包

webpack打包指令
npm run build
使用webpack打包vue项目，需要更改配置
1、webpack打包后生成dist文件，将dist文件更改成project，放在服务器中，会报错js的引用路径不对,页面空白。
解决办法：找到 config > index.js
build: {
index: path.resolve(__dirname, ‘../dist/index.html’),
assetsRoot: path.resolve(__dirname, ‘../dist’),
assetsSubDirectory: ‘static’,
// assetsPublicPath: ‘/’,
// 在/后边+文件名
assetsPublicPath: ‘/project’,

2、图片路径不对举例：

在src > assets > img > index.jpg 放置图片在src > components > home > Home.vue 引用
.home-bg
background-image: url(“../../assets/img/index.jpg”)
打包生成文件后，图片加载路径会出问题。
解决办法：找到 build > utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
// 添加publicPath: ‘../../’
publicPath: ‘../../’
})
} else {
return [‘vue-style-loader’].concat(loaders)
}
再次打包就可以了