报错1:vue-cli项目本地npm run dev启动后,chrome打开是空白页

  1. 解决方案:将config下的index.js中的assetsPublicPath路径都设置为‘/’绝对路径

报错2:打包后想要在本地file(直接打开index.html)中打开,但是打开是空白页

  1. 解决方案:将config下的index.js中的assetsPublicPath路径都设置为‘./’相对路径

报错3:打包后丢到服务器中,打开是空白页

  1.  解决方案:将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. router.beforeEach((to, from, next) => {
  3. // 判断cookie是否过期,否则直接跳转到登录页
  4. var getCookie = common.getCookie('userInfo')
  5. if (!getCookie) {
  6. console.log(to.path)
  7. if (to.path === '/login') { // 如果是登录页面路径,就直接next()
  8. next()
  9. } else { // 不然就跳转到登录
  10. next('/login')
  11. }
  12. } else {
  13. next()
  14. }
  15. })
  16. // 需要弄明白,一定要调用next()方法,然后注意,next方法传参和传参的不同,传参的时候会再次进入路由钩子,而直接调用next()就不会了,这里容易出现n多次循环就导致堆栈溢出而报错。

  

报错6:打包后打开发现很多图片(背景图片等)路径打包错误,访问不到

  终极解决办法:找到build目录下的utils.js文件,添加一行代码:

  1. // Extract CSS when that option is specified
  2. // (which is the case during production build)
  3. if (options.extract) {
  4. return ExtractTextPlugin.extract({
  5. use: loaders,
  6. fallback: 'vue-style-loader',
  7. // 添加此行代码,解决所有图片,字体路径问题
  8. publicPath:'../../'
  9. })
  10. } else {
  11. return ['vue-style-loader'].concat(loaders)
  12. }
  13. }

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. MySQL InnoDB简介

    从MySQL 5.5版本开始InnoDB已经是默认的表存储引擎 InnoDB 1:完全支持ACID 2:支持行级锁 3:支持MVCC 4:支持外键 MySQL 5.1版本 MySQL 5.1版本之前, ...

  2. SEO优化实践操作

    合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:descript ...

  3. 基于Python Tornado的在线问答系统

    概述 本项目使用最新的Tornado开发.实现了在线提问,回答,评论等功能.使用到Tornado的generator,长轮询等等技术, 支持MySQL的异步连接. 详细 代码下载:http://www ...

  4. 【mysql】主键、普通索引、唯一索引和全文索引的比较

    YSQL索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录 开始扫描整个表的所有记录,直至找到符合要求的记录.表里面的记 ...

  5. php后台“爬虫”模拟登录第三方系统

    http://blog.csdn.net/liu_c_y/article/details/49956679 http://www.php100.com/html/webkaifa/PHP/PHPyin ...

  6. Linux命令-目录处理命令:rmdir

    rmdir /tmp/shijiazhuang/yuhuaqu 删除一个子目录(必须是空目录) rmdir /tmp/shijiazhuang 删除一个不为空的目录会失败

  7. 摘:C#压缩文件

    [[[[C#压缩文件]]]] 方法1: //[filepath想要压缩文件的地址] //[zippath输出压缩文件的地址] private void GetFileToZip(string file ...

  8. Python title() 方法

    描述 Python title() 方法返回"标题化"的字符串,就是说所有单词都是以大写开始,其余字母均为小写. 语法 title() 方法语法: S.title() 参数 无. ...

  9. vsftpd被动模式配置

    1.vsftp配置   参考文章http://linux008.blog.51cto.com/2837805/6105992.设置vsftpd.conf开启被动模式参数    #vim    pasv ...

  10. Xilinx问题查找

    1.登录https://www.xilinx.com/ 2.在All下拉菜单选择Support选项查找技术问题,All选项会查找全部关键词,但是大多数我们只需要技术相关的内容