解决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跟随滚动条滚动浮动代码
Dec 31 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
js实现上传图片预览方法
Oct 25 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
工作中常用到的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
PHP模板引擎SMARTY
2006/10/09 PHP
PHP之数组学习
2011/05/29 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Django自定义分页效果
2017/06/27 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python 线程的五个状态
2020/09/22 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
质检的岗位职责
2013/11/17 职场文书
大学生创业策划书
2014/02/02 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2014年质检工作总结
2014/11/26 职场文书
质量保证书
2015/01/17 职场文书
爱国主义电影观后感
2015/06/18 职场文书
python实现A*寻路算法
2021/06/13 Python
python获取对象信息的实例详解
2021/07/07 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python