vue-cli打包構建時常見的報錯解決方案

報錯1：vue-cli項目本地npm run dev啓動後，chrome打開是空白頁

  解決方案：將config下的index.js中的assetsPublicPath路徑都設置爲‘/’絕對路徑

報錯2：打包後想要在本地file(直接打開index.html)中打開，可是打開是空白頁

  解決方案：將config下的index.js中的assetsPublicPath路徑都設置爲‘./’相對路徑

報錯3：打包後丟到服務器中，打開是空白頁

　解決方案：將config下的index.js中的assetsPublicPath路徑都設置爲‘./’相對路徑

報錯4：打包後在瀏覽器中打開，報錯ERROR in xxx.js from UglifyJs

　　這種錯誤是因爲部分或所有es6語法轉es5失敗了，須要安裝並在webpack中配置babel-loader，具體請參考此解決方案：http://www.javashuo.com/article/p-cowchvyi-u.html

報錯5：打包後打開頁面控制檯報錯，Uncaught RangeError: Maximum call stack size exceeded

　　報錯內容是堆棧溢出，就是大量內存被佔用，致使內存溢出，我碰到的場景是在全局路由鉤子裏（router.beforeEach）

// 全局導航鉤子
router.beforeEach((to, from, next) => {
  // 判斷cookie是否過時,不然直接跳轉到登陸頁
  var getCookie = common.getCookie('userInfo')
  if (!getCookie) {
    console.log(to.path)
    if (to.path === '/login') { // 若是是登陸頁面路徑，就直接next()
      next()
    } else { // 否則就跳轉到登陸
      next('/login')
    }
  } else {
    next()
  }
})
// 須要弄明白，必定要調用next()方法，而後注意，next方法傳參和傳參的不一樣，傳參的時候會再次進入路由鉤子，而直接調用next()就不會了，這裏容易出現n屢次循環就致使堆棧溢出而報錯。

　　

報錯6：打包後打開發現不少圖片（背景圖片等）路徑打包錯誤，訪問不到

　　終極解決辦法：找到build目錄下的utils.js文件，添加一行代碼：

// 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:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }