前言

hash 模式时将路径转换为 /#/xxx/xxx 模式，页面不刷新，请求资源路径不变，从而实现内容的跳转。

history 模式直接去掉了 /#/，如果服务器不配置的话，直接就是 404。

服务器实现 history 模式的原理：
只要请求某个应用下的资源，都返回这个应用的入口回去(index.html)，路径什么的都交给入口处理。

实现

nginx 有很多方法都能实现这个功能，这里介绍通过 error_page 实现的方法

以 vue 为例：

通过 error_page

vue 路由基础路径设置

// xxx.com 直接访问应用时无需修改 base
const router = new VueRouter({base: process.env.BASE_URL,mode: 'history'/* ... */
})

// xxx.com/xxx 访问应用时需修改 base
const router = new VueRouter({base: '/demo',mode: 'history'/* ... */
})

vue 根路径配置

history 模式下不能使用相对路径 ./，因为 history 模式下路径不是以 /#/ 表示，使用相对路径会使路径出错导致某些资源 404

// xxx.com 直接访问应用时设为 /
module.exports = {publicPath: '/',/* ... */
}

// xxx.com/xxx 直接访问应用时设为 xxx/
module.exports = {publicPath: 'demo/',/* ... */
}

nginx 配置

# 根据实际情况设置一下 root
# 可以写 location 外面（全局）,也可以写 location 里面（局部）
root  /www/server/nginx/html;

# xxx.com 访问应用
location / {index index.html;error_page 404 /index.html;
}

# xxx.com/xxx 访问应用
location /demo {index index.html;error_page 404 /demo/index.html;
}

利用 error_page 的特性，只要是 404 页面都返回相应的入口文件回去。

通过 try_files

还可以使用 try_files 实现

# xxx.com 访问应用
location / {try_files $uri $uri/ /index.html;
}

还可以使用 rewrite 实现 … nginx NB

单页应用history模式nginx配置相关推荐

vue history模式Nginx配置
当你使用 history 模式时,url就像正常的url,例如 "http://yoursite.com/mapp/subpage",不过这种模式还需要后台配置支持.因为我们的应用 ...
history模式 nginx配置_Vue history模式Nginx配置
vue开发使用history模式的时候Nginx相关的配置有如下两种: 1.此种配置直接使用的根域名,没有其他的二级路径,因此root直接指向目标文件夹,即包含index.html的文件夹路径 ser ...
history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理问题1思考: vue-route ...
vue路由history模式,nginx配置
nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...
Vue Router history模式的配置方法及其原理
转载地址:https://segmentfault.com/a/1190000019391139 vue-router分为hash和history模式,前者为其默认模式,url的表现形式为http:/ ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
vuejs构建的单页面应用history模式子页面微信分享在iOS中遇到的问题
问题描述在用vuejs做的SPA单页面应用,router模式为history模式,应用是个商城,在进入商品详情页时,第一次进入页面提示签名无效,手动刷新一下就ok,很是烦躁,经过不懈努力,终于解决. ...
vue-router路由history模式+nginx部署项目到非根目录下(实践版)
你总是心太软心太软独自一个人研究到天亮你无怨无悔的疯狂找寻我知道你根本没那么坚强你总是心太软心太软把所有问题都自己扛问题总是太多解决太难不是你的就别再勉强夜深了你还不想睡你还在想着他 ...
解决 VUE history模式后端配置微信支付目录限制5个等问题
前言作为小公司的WEB开发组组长, 本身为全栈工程师, 主攻方向为PHP. 最近将项目由MVC模式改为了MVVM, 做为小公司的为了节省成本, 招聘了一个新手前端, 编写VUE 新手的技术,无奈并不 ...

单页应用history模式nginx配置

前言

实现

通过 error_page

通过 try_files

单页应用history模式nginx配置相关推荐

最新文章

热门文章