解決vue打包後靜态資源路徑錯誤的問題

vue項目完成的最後一步就是打包部署上線，但是打包部署的過程往往不是那麼一帆風順的，現将遇到問題和解決方案記錄如下。

圖檔路徑問題

起因：

頁面中引入資源的方式往往有如下幾種

* HTML标簽中直接引入圖檔， 如

<img src="../assets/images/index.png">

* JS代碼中定義資源路徑屬性，如

src: require('../assets/images/index.png')

* CSS代碼中定義資源為背景圖檔，如

background-image: url("../assets/images/indexpng")

上述三種資源加載方式還是有所差別的。

前兩種無論圖檔大小，都會使用url-loader加載器将其轉化為base64編碼的靜态資源，而第三種方式則會根據webpack中配置的limit參數，動态選擇符合大小要求的圖檔進行轉碼，此時則會導緻不符合大小選擇的圖檔加載失敗，同時報出如下錯誤。

localhost:8080/dist/static/css/static/img/index.254207f.png

解決：

1.保證打包資源路徑可用，首先要做的是配置build.js執行時的資源參數，打開config目錄下的index.js

看代碼：

index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  // 修改為'./'滿足資源相對路徑
           

2.保證資源轉碼條件符合。這塊主要涉及到加載用到的加載器url-loader, 需要保證其配置可執行。打開build目錄下的webpack.base.conf.js

看代碼：

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,  // 該限制為小于10KB的圖檔，系統預設轉碼為base64
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
           

依賴資源路徑問題（字型、圖示）

起因：

系統采用vue + elementUI，但是發現打包之後的字型檔案和圖示都不能正常顯示，報錯如下：

解決：

打開build目錄下utils.js，添加路徑配置

publicPath: '../../'

,

看代碼：

// 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: '../../' // 解決element UI打包後字型檔案丢失
   })
 } else {
   return ['vue-style-loader'].concat(loaders)
 }
}
           

以上内容，全為個人拙見，如有錯誤，還望指正。

感謝博文：

https://blog.csdn.net/qq_38543537/article/details/90755830

https://segmentfault.com/q/1010000015012074