之前项目遇到个情况,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. mysql的字符串函数

    From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/12/13/1904330.html 对于针对字符串位置的操作,第一个位置被标 ...

  2. python 程序构架浅析

    定义:通常的 Python 程序的构架是指:将一个程序分割为源代码文件的集合以及将这些部分连接在一起的方法. python的程序构架可表示为: 一个python程序就是一个模块的系统.它有一个顶层文件 ...

  3. synchronized关键字的用法总结

    synchronized关键字主要有以下这3种用法: 修饰实例方法,作用于当前实例加锁,进入同步代码前要获得当前实例的锁 修饰静态方法,作用于当前类对象加锁,进入同步代码前要获得当前类对象的锁 修饰代 ...

  4. Unity3D编辑器之不实例化Prefab获取删除更新组件

    原文链接:http://www.xuanyusong.com/archives/3727

  5. 怎么使用ABBYY中的Bates编号

    ABBYY PDF Transformer+ 可让您将 Bates 编号添加到 PDF 文档.Bates 编号可方便文档搜索和检索,并更加有利于电子归档.下面小编给小伙伴们讲讲ABBYY PDF Tr ...

  6. 百度云高速下载Pandownload

    对于一些文件大小比较小的文件,可以直接在网页分享中点击[下载]来下载: 但是,对于较大点的文件,点击[下载]会弹出百度云的桌面客户端软件来下载: 但但是,下载速度实在是太慢了,强迫症真真等不及啊~ 幸 ...

  7. [原]巧用RenderTexture

    郑重声明:转载请注明出处 U_探索 本文诞生于面试过程中这道题:NGUI如何制作3D角色的显示.(大概是这样)  呵呵 没事出去面试面试,考核考核自己也是一种不错的方式哦!不过现在u3d面试,貌似比以 ...

  8. 条件独立(conditional independence) 结合贝叶斯网络(Bayesian network) 概率有向图 (PRML8.2总结)

    本文会利用到上篇,博客的分解定理,需要的可以查找上篇博客 D-separation对任何用有向图表示的概率模型都成立,无论随机变量是离散还是连续,还是两者的结合. 部分图为手写,由于本人字很丑,望见谅 ...

  9. ios学习之UIWebView网页视图调整

    //先来一个可行的小Demo程序:结合searchBar的google搜索 #import <UIKit/UIKit.h> @interface ViewController : UIVi ...

  10. MyBatis 与 Spring 是如何结合在一起工作的——mybatis-spring(version:1.2.2)

    在MyBatis-Spring的项目中,我们一般会为MyBatis配置两个配置文件 beans-mybatis.xml 和 mybatis-config.xml.其中 beans-mybatis.xm ...