報錯1：vue-cli項目本地npm run dev啟動后，chrome打開是空白頁
|
1
|
<
strong
> 解決方案</
strong
>：將config下的index.js中的assetsPublicPath路徑都設置為‘/’絕對路徑
|
報錯2：打包后想要在本地file(直接打開index.html)中打開，但是打開是空白頁
|
1
|
<
strong
> 解決方案</
strong
>：將config下的index.js中的assetsPublicPath路徑都設置為‘./’相對路徑
|
報錯3：打包后丟到服務器中，打開是空白頁
|
1
|
<
strong
> 解決方案</
strong
>：將config下的index.js中的assetsPublicPath路徑都設置為‘./’相對路徑
|
報錯4：打包后在瀏覽器中打開，報錯ERROR in xxx.js from UglifyJs
這種錯誤是由於部分或全部es6語法轉es5失敗了，需要安裝並在webpack中配置babel-loader，具體請參考此解決方案：https://segmentfault.com/a/1190000011212544
報錯5：打包后打開頁面控制台報錯，Uncaught RangeError: Maximum call stack size exceeded
報錯內容是堆棧溢出，就是大量內存被占用，導致內存溢出，我碰到的場景是在全局路由鈎子里（router.beforeEach）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 全局導航鈎子
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文件，添加一行代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 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)
}
}
|
轉載自：https://www.cnblogs.com/hjvsdr/p/8064880.html