报错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. Linux 监测常用的图形工具

    cacti zabbix nagios nagiosgraph

  2. Sublime Text 包管理工具及扩展大全

    Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写 ...

  3. Android应用开发相关下载资源(2014/12/14更新)

    官方终于发布了Android Studio正式版,Android Studio将会成为推荐使用的主要Android开发工具. (1)Android SDK (Android SDK主安装包,包含SDK ...

  4. ubuntu PATH 出错修复

    我的 ubuntu10.10设置交叉编译环境时,PATH 设置错误了,导致无法正常启动,错误情况如下: { PATH:找不到命令ubuntu2010@ubuntu:~$ ls命令 'ls' 可在 '/ ...

  5. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  6. PHP is_callable 方法

    is_callable (PHP 4 >= 4.0.6, PHP 5) is_callable — 验证变量的内容是否能够进行函数调用 Description bool is_callable  ...

  7. Facebook API 入门

    Facebook 商业价值简介 Facebook 是一个社交网络服务网站,于 2004 年 2 月 4 日上线,到 2010 年 2 月 2 日, Facebook 正赶超雅虎将成为全球第三大网站,与 ...

  8. Python在ubuntu下常用开发包名称

    build-essential python3-setuptools python-setuptools-doc python3-all-dev python3-wheelwheel时pip支持的一种 ...

  9. php排序函数学习

    sort() 函数按升序对给定数组的值排序. 注释:本函数为数组中的单元赋予新的键名.原有的键名将被删除. 如果成功则返回 TRUE,否则返回 FALSE. <?php$my_array = a ...

  10. struts2拦截器的实现原理及源码剖析

    拦截器(interceptor)是Struts2最强大的特性之一,也可以说是struts2的核心,拦截器可以让你在Action和result被执行之前或之后进行一些处理.同时,拦截器也可以让你将通用的 ...