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. Oracle数据库的下载与安装

    Oracle数据库下载: 推荐去Oracle官网下载 官方网址链接:https://www.oracle.com/database/technologies/oracle-database-softw ...

  2. Nginx负载均衡的max_fails和fail_timeout的默认配置问题

    今天发现一个奇怪的现象,前端请求后端服务多次后会超时一次,经过多次验证确定是大概10s左右就会超时一次,检查后端服务,发现其中一个节点已经夯死. 但是我们的nginx负载均衡策略是轮询机制,按照配置来 ...

  3. 动画可以暂停animation-play-state

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

  4. 【CF321E】+【bzoj5311】贞鱼

    决策单调性 + WQS二分 我们首先列出转移式: \(f[i]=Min(f[j]+Sum[j+1 , i])\) 首先我们考虑如果让一段区间的小鱼在一起的代价怎么预处理,我们可以对于一个上三角矩阵求个 ...

  5. hadoop编程小技巧(1)---map端聚合

    測试hadoop版本号:2.4  Map端聚合的应用场景:当我们仅仅关心全部数据中的部分数据时,而且数据能够放入内存中. 使用的优点:能够大大减小网络数据的传输量,提高效率: 一般编程思路:在Mapp ...

  6. JS中类或对象的定义说明

    本篇文章主要是对JS中类或对象的定义进行说明介绍.我们知道,JS是面向对象的.谈到面向对象,就不可避免的要涉及类的概念.一般像c#,java这些强类型语言都有固定的定义类的语法.而JS的不同之处在于它 ...

  7. Ionic -v1初始项目结构

    界面  

  8. 如何在springboot中读取自己创建的.properties配置的值

    在实体类里面加上 @PropertySource("classpath:/robot_config.properties") robot_config.properties // ...

  9. js中的offsetWidth用法

    offsetWidth  //返回盒模型的宽度(包括width+左右padding+左右border) <style> #div1 { width:200px; height:200px; ...

  10. runtime 理解笔记

    runtime 简称运行时,是系统运行的一种机制,在oc中通过c语言编写一个运行系统库.考进行一些非常底层的操作(oc无法完成的). 1.利用runtime,在程序运行过程中,动态创建一个类(比如KV ...