解决vue-cli项目打包出现空白页和路径错误的问题


Posted in Javascript onSeptember 04, 2018

vue-cli项目打包:

1. 命令行输入:npm run build

打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目。

解决vue-cli项目打包出现空白页和路径错误的问题

第一个问题,文件引用路径。我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题。

解决:到config文件夹中打开index.js文件。

文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:

解决vue-cli项目打包出现空白页和路径错误的问题

assetsPublicPath属性作用是指定编译发布的根目录,‘/'指的是项目的根目录 ,'./'指的是当前目录。

改好之后重新打包项目,运行index.html文件,我们可以看到没有报错了。但是router-view里面的内容却出不来了。

第二个问题:router-view中的内容显示不出来。路由history模式。

这个坑是当你使用了路由之后,在没有后端配合的情况下就手贱打开路由history模式的时候,打包出来的文件也会是一片空白的情况,

很多人踩这个坑的时候花了很多时间,网上的教程基本上都是说的第一个坑,这个坑很少有人提起。

解决vue-cli项目打包出现空白页和路径错误的问题

解决:// mode: 'history',//将这个模式关闭就好

这里并不是说不能打开这个模式,这个模式需要后端设置的配合,详情可以看:路由文档

以上这篇解决vue-cli项目打包出现空白页和路径错误的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
工作中常用到的ES6语法
Sep 04 #Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 #Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 #Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 #Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 #Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 #Javascript
ES6中let 和 const 的新特性
Sep 03 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
理解javascript正则表达式
2016/03/08 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
原生js开发的日历插件
2017/02/04 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
三年级小学生评语
2014/04/22 职场文书
班干部演讲稿
2014/04/24 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript