解决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 相关文章推荐
js动态创建、删除表格示例代码
Aug 07 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
js获取url中"?"后面的字串方法
May 15 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue中的v-if和v-show的区别详解
Sep 01 Javascript
javascript实现前端分页功能
Nov 26 Javascript
工作中常用到的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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
绩效考核实施方案
2014/03/18 职场文书
2014年会策划方案
2014/05/11 职场文书
公司聚餐通知
2015/04/22 职场文书
学校运动会简讯
2015/07/20 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
web前端之css水平居中代码解析
2021/05/20 HTML / CSS