vue项目打包之后页面空白解决办法
之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示。
然后百度找了原因,修改了两处地方
一、修改 assetsPublicPath
在config/index.js里面,有个 assetsPublicPath 属性,源码是‘/’,修改成‘./’,加个点
assetsPublicPath: '/',
二、路由模式将histroy改成hash模式,起初 mode:'history'
const router = new Router({
base: '/',
mode: 'hash',
routes: ROUTES
})
那么vue-router的hash模式和histroy模式有什么区别呢?
1、hash模式url带#,histroy模式url不带#
2、hash模式解决了通过http请求来切换页面,改变路径可以直接改变页面,无需进行网络请求,这叫前端路由,在hash模式下改变的是#中的信息,
history模式,可以前进和后退,但是不能刷新页面,刷新之后就会报错。如果后端没有对路由地址进行相应的处理,那么就会报404的错。
3、hash浏览器支持率比较好,支持低版本的浏览器,但history的方法只支持部分浏览器。
vue项目打包之后页面空白解决办法的更多相关文章
- vue项目打包后打开空白解决办法
1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. a ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue项目chunk包loading失败解决办法
错误截图: 解决方法: // loading chunk 出错处理 router.onError((error) => { const pattern = /Loading chunk (\d) ...
- 移动端ios网页版收起键盘导致页面空白解决办法
失焦的时候把窗口滚动位置设置到(0,0)就行了 <input type="text" onblur="window.scrollTo(0, 0);"> ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- vue项目打包踩坑记
基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...
- vue项目打包成html,在本地点击直接能打开
默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...
随机推荐
- js准确获取当前页面url网址信息
这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法.split拆分法等,需要的朋友可以参考下 在WEB开发中,时常会用到javascript来获取当前页面的url网址 ...
- DNS服务器介绍及设置
DNS服务器是指“域名解析服务器”,而域名就是我们通常所说的“网址”.在互联网中识别和寻找不同的计算机,实际上是需要知道该计算机的IP地址才能进行访问.比如220.181.38.4,这个IP就是百度的 ...
- 怎样把网站升级到http/2
https://juejin.im/post/59c63adf6fb9a00a4c271484
- 关于修改linux hostname的问题,尤其是redhat 7修改hostname的方式
http://blog.csdn.net/the_conquer_zzy/article/details/68064149
- 模式(一)javascript设计模式
模式有三种:Architectural Pattern.Design Pattern.Coding Pattern,即:框架模式.设计模式.编程模式.本文主要讲解javascript中的设计模式,好的 ...
- pycharm 对代码做静态检查
对于下面这种情况,java c这些提前编译的语言,不给你运行机会就立马报错了,但对于动态语言运行之后才能报错,用运行的方法来检查代码错误是在是太坑了,这是py对比静态语言的巨大劣势,尤其是代码文件多行 ...
- C#中AppDomain.CurrentDomain.BaseDirectory与Application.StartupPath的区别
// 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径. System.Diagnostics.Process.G ...
- CreateProcess函数详解
在windows程序设计五中有详解 CreateProcess 说明: WIN32API函数CreateProcess用来创建一个新的进程和它的主线程,这个新进程运行指定的可执行文件. 函数原型: B ...
- MyEclipse weblogic Deploy Location项目名称不正确解决方案
MyEclipse weblogic Deploy Location项目名称不正确 MyEclipse部署weblogic 项目,名称错误,是别的项目名称 ====================== ...
- IIS URL Rewrite Module的防盗链规则设置
IIS版本:IIS 7.5 URL Rewrite组件:IIS URL Rewrite Module(http://www.iis.net/downloads/microsoft/url-rewrit ...