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

vue-cli打包构建时常见的报错解决方案的更多相关文章

  1. vue项目打包后在IE浏览器报错,页面显示空白

    之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...

  2. ionic3 打包安卓平台环境搭建报错解决方案总结

    1.jvm虚拟机提供的运行空间小于项目所需的空间是报错.如图: 解决方法:在环境变量中配置jvm的运行内存大小,大于所需的内存即可. 其中:-Xmx512M可根据实际提示情况,进行更改,如1024M, ...

  3. ASP.NET C# 打包再修改aspx文件报错解决方案

    aspx文件最开始: <%@ page language="C#" autoeventwireup="true" inherits="tiddk ...

  4. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  5. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  6. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  7. nuxtjs在vue组件中使用window对象编译报错的解决方法

    我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...

  8. vite 动态 import 引入打包报错解决方案

    关注公众号: 微信搜索 前端工具人 ; 收货更多的干货 原文链接: 自己掘金文章 https://juejin.cn/post/6951557699079569422/ 关注公众号: 微信搜索 前端工 ...

  9. python中常见的报错信息

    python中常见的报错信息 在运行程序时常会遇到报错提示,报错的信息会提示是哪个方向错的,从而帮助你定位问题: 搜集了一些python最重要的内建异常类名: AttributeError:属性错误, ...

随机推荐

  1. CompletableFuture 详解

    转 http://www.jianshu.com/p/6f3ee90ab7d3 CompletableFuture类实现了CompletionStage和Future接口.Future是Java 5添 ...

  2. windows C:\documents and settings拒绝访问

      windows C:\documents and settings拒绝访问 CreationTime--2018年7月26日09点16分 Author:Marydon 1.情景再现 win+r-- ...

  3. git——分布式版本控制系统

    Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...

  4. 使用RMAN方式清除

    使用RMAN方式清除 RMAN清除方式会自动清除磁盘上的归档日志文件,同时会释放控制文件中对应的归档日志的归档信息. 可以基于不同的条件来清除归档日志,如基于SCN,基于SEQUENCE,基于TIME ...

  5. screen 命令使用及示例

    screen 是一个非常有用的命令,提供从单个 SSH 会话中使用多个 shell 窗口(会话)的能力.当会话被分离或网络中断时,screen 会话中启动的进程仍将运行,你可以随时重新连接到 scre ...

  6. Swift 与 Object-C 交互 (Swift版本为:1.2)

    这篇文章主要是介绍 Swift 与 Object-C 之间进行交互的代码,主要分为两个部分.一个是 Swift 项目调用 Object-C 的类,另一个是 Object-C 项目调用 Swift 类. ...

  7. VS Code - Debugger for Chrome调试js

    最近在自学一些s的内容,用到了vscode来编写代码,一直没有使用过vs调试js的代码,看到左侧有推荐一个插件Debugger for Chrome使用来调试js代码的,对于vs这种开源,需要安装各种 ...

  8. 学习C#——性能计数器

    写在前面: 作为Web应用开发前线的一枚小兵,每看到“性能”一词总有种要亮瞎眼的感觉,说到“性能”那就不能不提“数据”,在程序猿.攻城师中不是流行这样一句话吗?“无图无真相”,谁要说谁开发的应用性能有 ...

  9. C# AutoResetEvent

    文章转载自:C# AutoResetEvent AutoResetEvent 常常被用来在两个线程之间进行信号发送 AutoResetEvent是.net线程简易同步方法中的一种,两个线程共享相同的A ...

  10. DevExpress中GridControl列转义的实现方法

    /// <summary> /// CustomColumnDisplayText Helper /// </summary> /// <param name=" ...