解决webpack打包vue项目后,部署完成后,刷新页面页面404
1.url不动式
url完全不动,即你的页面怎么改变,怎么跳转url都不会改变。这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页
2.带hash(#)式
这种相对于第一种的话刷新页面页面不会丢失
实现原理
写一个window事件我监听url的变化,那我就能实先路由,那样我就可以根据url的变化,来通过ajax请求参数来渲染页面,一个url对应一个页面,就不会重复。
window.addEventListener(‘hashchange‘,function(){
self.urlChange()
})
3.无hash(#)式
这种类型是通过html5的最新history api来实现的 能正常的回退前进,超嗨
那么问题来了
第一种方式页面不能刷新,第二种刷新也无妨,因为url并没有改变,请求url从服务器照样能够loading到页面。
但是第三种就出问题了,我一刷新就loading不到页面就报404页面丢失了。怎么办呢???
解决方案
方案一
通过后台控制404转发到程序入口index.html页面来,让页面能够正常的显示。
方案二
通过服务器的nginx配置
可以去参考下vue的单页面模式路由页刷新解决方案
http://www.cnblogs.com/kevingrace/p/6126762.html
转载地址:https://blog.csdn.net/u013234218/article/details/70170837
解决webpack打包vue项目后,部署完成后,刷新页面页面404的更多相关文章
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- 如何做到在webpack打包vue项目后,在外部动态修改配置文件
在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- webpack打包vue项目之后怎么启动&注意事项
参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...
- 使用Cordova打包Vue项目
因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...
- webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
- 教你用Cordova打包Vue项目
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
随机推荐
- 接口自动化之提取响应结果(raw、json)
做接口测试时,我们一般会取得响应结果的部分值,来与预期结果对比,做断言 目录 1.响应结果类型 2.json响应结果的提取 3.raw响应结果的提取 1.响应结果类型 通过fiddler的respon ...
- Spring MVC 向页面传值-Map、Model和ModelMap https://www.cnblogs.com/caoyc/p/5635878.html
Spring MVC 向页面传值-Map.Model和ModelMap 除了使用ModelAndView方式外.还可以使用Map.Model和ModelMap来向前台页面创造 使用后面3种方式,都是在 ...
- 16/7/8_PHP-单引号和双引号的区别
在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 但是必须使用同一种单或双引号来定义字符串,如:'Hello World"和"He ...
- 浅谈vue$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- 简述Vue中的计算属性
1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...
- 代码执行testng的几种方式
一.指定test class Test class FirstTest package cas.eric; import org.testng.annotations.Optional; import ...
- linux中cut命令
cut命令 cut常用参数 cut命令用来显示行中的指定部分,删除文件中指定字段. 说明:该命令有两项功能,其一是用来显示文件的内容,它依次读取由参数file所指明的文件,将它们的内容输出到标准输出上 ...
- ML5238电池管理芯片笔记
根据公司需要开发了以ML5238电池管理芯片+STM8S为核心的电池管理系统.由于前期对BMS系统还是了解甚少,开发起来也遇到了不少困难.再开发管理系统的同时,我也开发了管理系统的上位机, ...
- Appium+Python之批量执行测试用例
思考:当存在多个脚本,每个脚本中有多条测试用例时,我们该如何批量执行呢?分析:首先创建2个测试用例脚本(.py文件),每个脚本有2条测试用例,然后批量执行全部测试用例 #Test_01.py # co ...
- (一:NIO系列)JAVA NIO 简介
出处:JAVA NIO 简介 Java 中 New I/O类库 是由 Java 1.4 引进的异步 IO.由于之前老的I/O类库是阻塞I/O,New I/O类库的目标就是要让Java支持非阻塞I/O, ...