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)
    }

再次打包就可以了