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,具体请参考此解决方案:https://segmentfault.com/a/1190000011212544
报错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)
}
}