VUE使用Webpack打包路徑問題

使用Webpack進行項目打包，容易出現引用資源路徑錯誤問題。總結一下

1、webpack打包指令

npm run build

2、webpack打包後生成dist文件,將dist文件夾中的文件，放在服務器上

一、若是頁面空白，報錯資源的引用路徑不對

解決：找到 config > index.js

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    // 在/前邊+  .
    assetsPublicPath: './',
}

二、若是圖片不顯示

圖片路徑實例：

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

3、再次打包

----end------

PS：引用圖片路徑很長，能夠經過設置引用路徑，來簡寫代碼。好比：

background-image: url("~assets/img/index.jpg")

感興趣能夠看個人另外一篇文章vue-cli webpack.base.confi.js引用路徑的配置