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)
}
再次打包就可以了