解决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 相关文章推荐
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
Apr 20 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
javascript 继承实现方法
2009/08/26 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
介绍一下linux文件系统分配策略
2013/02/25 面试题
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
初三学习决心书
2014/03/11 职场文书
分家协议书
2014/04/21 职场文书
自我管理的活动方案
2014/08/25 职场文书
法人委托书范本格式
2014/09/15 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis