今天使用vue打包（npm run build）遇到了幾個坑，在這裡分享給大家

打包之後開啟dist的頁面顯示空白：

這個問題以前就處理過，是打包過程中出現錯誤頻率較高的一種，可能有3處地方會出現這種情況

1、記得改一下config下面的index.js中bulid模組匯出的路徑。因為打包後的index.html裡邊的內容都是通過script標籤引入的，預設顯示的路徑不對，開啟肯定是空白的。

build: {
  index: path.resolve(__dirname,'../dist/index.html'),assetsRoot: path.resolve(__dirname,'../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',productionSourceMap: true,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js','css'],bundleAnalyzerReport: process.env.npm_config_report
 }

這裡需要將 assetsPublicPath: '/'改為assetsPublicPath: './',

2.src裡邊router/index.js路由配置裡邊預設模式是mode:'hash'（頁面會在路由上加#），有時候改成了history（純淨路由）模式的話，開啟也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它預設的就行 。

export default new Router({
//mode: 'history',mode:'hash',\\或者直接不寫
 routes: [{}]
)}

3.也有可能是因為背景圖片路徑沒有配置需要在build/utils.js新增配置publicPath: '../../'

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,publicPath:'../../',fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }

打包後找不到響應路徑：

這都是比較常見的幾種解決方式，如果將靜態資源的圖片路徑作為繫結資料以js引入，圖片放入了static裡面用來引入這個頁面又該怎樣處理呢,如果以絕對路徑訪問vue打包是不會處理這一類的，所以打包後它圖片訪問的路徑不會更改，而打包後dist檔案裡就只有index.html和webpack不會處理的static資料夾（vue static/下的檔案都不會被Webpack處理：它們使用相同的檔名，直接拷貝到最終的路徑）

解決方式有兩種，

1.如果要上線的話，需要將你的主域名加在static之前然後他會逐級去訪問打包後的檔案。

return {
 isShow:true,imgData:'',myUpPic:'/yourDN/static/img/logo.png'
}

2.由於vue將元件訪問靜態資源的路徑配置好了，你可以直接/static來找到static下的檔案，但是這裡的問題就是你訪問的時候它是逐級訪問這些檔案的，所以打包後他還是會找不到靜態資源的檔案，在這裡你就需要將/static改成./static，這樣的話他就會在打包後的資料夾下直接訪問其之下的靜態資原始檔夾。

return {
 isShow:true,//myUpPic:'/static/img/logo.png' 
 myUpPic:'./static/img/logo.png'
}

以上就是個人處理vue打包bug的一些小經驗，希望這些能夠對大家有所幫助。

補充知識：vue打包後路徑多了個/css/static

vue打包後路徑多了個/css/static導致一些css屬性效果不顯示。

解決方法：

在build/utils.js檔案中新增publicPath:'…/…/',重新打包即可。

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,fallback: "vue-style-loader",publicPath: "../../"
   });
  } else {
   return ["vue-style-loader"].concat(loaders);
  }

以上這篇vue打包靜態資源後顯示空白及static檔案路徑報錯的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。