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的圖片，系統默認轉碼為base64name: 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

總結

以上是生活随笔為你收集整理的解决vue打包后静态资源路径错误的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。