图片打包进服务器变成html访问报错,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/1190000011212544javascript

报错5：打包后打开页面控制台报错，Uncaught RangeError: Maximum call stack size exceeded

报错内容是堆栈溢出，就是大量内存被占用，致使内存溢出，我碰到的场景是在全局路由钩子里(router.beforeEach)html

// 全局导航钩子

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文件，添加一行代码：vue

// 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)

}

}