报错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