之前项目遇到个情况,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项目打包之后页面空白解决办法的更多相关文章

  1. vue项目打包后打开空白解决办法

    1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. a ...

  2. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  3. vue项目chunk包loading失败解决办法

    错误截图: 解决方法: // loading chunk 出错处理 router.onError((error) => { const pattern = /Loading chunk (\d) ...

  4. 移动端ios网页版收起键盘导致页面空白解决办法

    失焦的时候把窗口滚动位置设置到(0,0)就行了 <input type="text" onblur="window.scrollTo(0, 0);"> ...

  5. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  6. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  7. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  8. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  9. vue项目打包成html,在本地点击直接能打开

    默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...

随机推荐

  1. 垃圾回收机制GC知识再总结兼谈如何用好GC(其他信息: 内存不足)

    来源 图像操作,易内存泄露,边界像素 一.为什么需要GC 应用程序对资源操作,通常简单分为以下几个步骤: 1.为对应的资源分配内存 2.初始化内存 3.使用资源 4.清理资源 5.释放内存 应用程序对 ...

  2. php 多页面间共享变量

    1. 保存session的页面session1.php <? echo "hi, let's try session<br/>"; session_start() ...

  3. Java多线程之细说线程池

    前言 在认识线程池之前,我们需要使用线程就去创建一个线程,但是我们会发现有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因 ...

  4. 微服务架构eureka集群高可用配置

    工具:idea 环境:java8.maven3 版本:spring boot 1.5.15.RELEASE 1.搭建spring boot eureka项目 2. pom.xml添加相应依赖,如下: ...

  5. CentOS 7下彻底卸载MySQL数据库

    转载: https://zhangzifan.com/centos-7-remove-mysql.html

  6. 【Ubuntu】录屏软件

    http://www.leesven.com/2378.html sudo apt-get install kazam

  7. Java基础之深入理解Class对象与反射机制

    深入理解Class对象 RRIT及Class对象的概念 RRIT(Run-Time Type Identification)运行时类型识别.在<Thinking in Java>一书第十四 ...

  8. 11gR2 RAC:更换OCR、votedisk

    要点: ocrconfig 备份-恢复 ocrconfig 导出-导入 crsctl querry css votedisk crsctl replace votedisk {+dsikgroup|s ...

  9. IE每次关闭都提示IE已停止工作

    方法一:打开IE浏览器,点击工具,选择下拉菜单中的internet选项,切换至高级选项卡标签,找到“启用第三方浏览器扩展”选项.把前面的打勾去掉: 方法二:打开IE浏览器,不管是6.0还是更高的版本这 ...

  10. html实体转换

    摘要: 在 HTML 中,某些字符是预留的.在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签.如果希望正确地显示预留字符,我们必须在 HTML 源代码中 ...