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)
- }
- }
vue-cli打包构建时常见的报错解决方案的更多相关文章
- vue项目打包后在IE浏览器报错,页面显示空白
之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...
- ionic3 打包安卓平台环境搭建报错解决方案总结
1.jvm虚拟机提供的运行空间小于项目所需的空间是报错.如图: 解决方法:在环境变量中配置jvm的运行内存大小,大于所需的内存即可. 其中:-Xmx512M可根据实际提示情况,进行更改,如1024M, ...
- ASP.NET C# 打包再修改aspx文件报错解决方案
aspx文件最开始: <%@ page language="C#" autoeventwireup="true" inherits="tiddk ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- Vue Cli 打包之后静态资源路径不对的解决方法
cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...
- vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错
首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...
- nuxtjs在vue组件中使用window对象编译报错的解决方法
我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...
- vite 动态 import 引入打包报错解决方案
关注公众号: 微信搜索 前端工具人 ; 收货更多的干货 原文链接: 自己掘金文章 https://juejin.cn/post/6951557699079569422/ 关注公众号: 微信搜索 前端工 ...
- python中常见的报错信息
python中常见的报错信息 在运行程序时常会遇到报错提示,报错的信息会提示是哪个方向错的,从而帮助你定位问题: 搜集了一些python最重要的内建异常类名: AttributeError:属性错误, ...
随机推荐
- MySQL InnoDB简介
从MySQL 5.5版本开始InnoDB已经是默认的表存储引擎 InnoDB 1:完全支持ACID 2:支持行级锁 3:支持MVCC 4:支持外键 MySQL 5.1版本 MySQL 5.1版本之前, ...
- SEO优化实践操作
合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:descript ...
- 基于Python Tornado的在线问答系统
概述 本项目使用最新的Tornado开发.实现了在线提问,回答,评论等功能.使用到Tornado的generator,长轮询等等技术, 支持MySQL的异步连接. 详细 代码下载:http://www ...
- 【mysql】主键、普通索引、唯一索引和全文索引的比较
YSQL索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录 开始扫描整个表的所有记录,直至找到符合要求的记录.表里面的记 ...
- php后台“爬虫”模拟登录第三方系统
http://blog.csdn.net/liu_c_y/article/details/49956679 http://www.php100.com/html/webkaifa/PHP/PHPyin ...
- Linux命令-目录处理命令:rmdir
rmdir /tmp/shijiazhuang/yuhuaqu 删除一个子目录(必须是空目录) rmdir /tmp/shijiazhuang 删除一个不为空的目录会失败
- 摘:C#压缩文件
[[[[C#压缩文件]]]] 方法1: //[filepath想要压缩文件的地址] //[zippath输出压缩文件的地址] private void GetFileToZip(string file ...
- Python title() 方法
描述 Python title() 方法返回"标题化"的字符串,就是说所有单词都是以大写开始,其余字母均为小写. 语法 title() 方法语法: S.title() 参数 无. ...
- vsftpd被动模式配置
1.vsftp配置 参考文章http://linux008.blog.51cto.com/2837805/6105992.设置vsftpd.conf开启被动模式参数 #vim pasv ...
- Xilinx问题查找
1.登录https://www.xilinx.com/ 2.在All下拉菜单选择Support选项查找技术问题,All选项会查找全部关键词,但是大多数我们只需要技术相关的内容