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的更多相关文章

  1. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  2. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  3. 16.如何做到webpack打包vue项目后,可以修改配置文件

    问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...

  4. webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. webpack打包vue项目之后怎么启动&注意事项

    参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...

  6. 使用Cordova打包Vue项目

    因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...

  7. webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  8. 教你用Cordova打包Vue项目

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...

  9. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

随机推荐

  1. jmeter之分布式压测

    很多性能大牛说一台机器的压测其实不准确,于是搜索网上的分布式压测练习了一番 目录 1.环境准备 2.控制机和压测机配置 3.执行分布式压测 1.环境准备 1.1准备一台windows作为控制机(mas ...

  2. 3 深入解析controlfile

    3 深入解析controlfile Control file: dump SQL> alter session set events 'immediate trace name controlf ...

  3. 【AndroidFramework】ATV9遥控器红外模式下,机顶盒在假待机阶段会响应遥控器语音键

    [问题描述] 测试部反馈,红外模式下,按power键进入假待机,按红外语音键会唤醒. 背景交代:红外语言键是我们自定义的按键,键值225.在红外模式下按会弹提示框"没连蓝牙,请连蓝牙使用语音 ...

  4. 使用autofac的一些问题

    None of the constructors found with 'Autofac.Core.Activators.Reflection.DefaultConstructorFinder' on ...

  5. R语言常用数据管理

    1.变量的重命名 (1)交互式编辑器修改变量名 若要修改数据集x中的变量名,键入fix(x)即可打开交互式编辑器的界面.若数据集为矩阵或数据框,单击交互式编辑器界面中对应要修改的变量名,可手动输入新的 ...

  6. MySQL5.7 慢查询+DDL操作堵塞查询

    数据库版本: mysql> select @@version; +------------+ | @@version | +------------+ | 5.7.26-log | +----- ...

  7. 如何设置 ComboBox 下拉列表的高度或间距

    ComboBox 的下拉列表部分总是很挤,看起不舒服,但是设置了 ItemHeight 没用,怎么办呢? 首先设置一个较大的 ItemHeight 值,比如 20: 然后设置 ComboBox 的 D ...

  8. JavaScript基础2——下拉列表左右选择

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 移动端300ms延迟原理,穿透、遮罩层滑动导致下面滑动总结

    遮罩层滑动导致下面滑动 1,阻止弹层滑动,使用默认事件,使用这种方式弹层不能滑动 document.getElementById("model").addEventListener ...

  10. nativescript(angular2)——ListView组件

    NativeScript是一个不使用webview的情况下构建跨平台并且原生的iOS和Android应用.使用Angular.TypeScript或JavaScript来获得原生UI和性能体验,同时可 ...