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-& ...
随机推荐
- Linux free命令使用及解析
1. 命令格式 free [参数] 2. 命令功能 free 命令显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存.共享内存将被忽略 3. 命令参数 -b 以Byte ...
- HTML5视频破碎重组特效 强大视觉冲击
HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTML5将会将这些区域击碎,过一段时间,这些被击碎的视频碎 ...
- windows下Nginx与tomcat组合简单使用
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中瓦片资源越来越多,如果提高瓦片的访问效率是一个需要解决的 ...
- javascript对数据处理
数组去重 法一: // 遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组 function unique(ar) { var ret = []; ...
- linux下nginx配置ssl证书(https)
nginx配置ssl很简单,首先需要两个文件,一个是crt文件,另一个是key文件,如下所示: xxx.crt; #(证书公钥)xxx.key; #(证书私钥) 把这两个文件放到nginx的conf ...
- itext汇总 生成pdf
https://www.cnblogs.com/xiaoSY-learning/p/5805577.html
- MarkDown技巧:两种方式实现页内跳转
MarkDown技巧:两种方式实现页内跳转 本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/JohnT ...
- python中的List 和 Tuple
#-*- coding:UTF-8 -*- classmates=["Michael","Bob","Tracy"] print(class ...
- [转载]Android 生成keystore,两种方式
Refer : http://blog.csdn.net/ms03001620/article/details/8490314 一.eclipse 中生成android keystore 建立任意一个 ...
- 1、一、Introduction(入门): 0、Introduction to Android(引进到Android)
一.Introduction(入门) 0.Introduction to Android(引进到Android) Android provides a rich application framewo ...