解决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 相关文章推荐
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
详解ES6中的代理模式——Proxy
Jan 08 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 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
当海贼王变成JOJO风
2020/03/02 日漫
php小偷相关截取函数备忘
2010/11/28 PHP
JQuery验证工具类搜集整理
2013/01/16 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
PHP守护进程实例
2015/03/06 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
javascript中this关键字详解
2016/12/12 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python 26进制计算实现方法
2015/05/28 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
一道Delphi上机题
2012/06/04 面试题
国际贸易毕业生求职信
2014/07/20 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
意向协议书
2015/01/27 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
python中super()函数的理解与基本使用
2021/08/30 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers