Nginx部署history路由模式的vue项⽬

问题 :Nginx通过location配置多个前端项⽬,如果前端使⽤了history路由,多级⽬录状态下刷新⻚⾯,nginx会报404或者500

前端框架使⽤的是: vue-cli

脚⼿架打包编译配置为:

javascript 复制代码
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/vdp',

nginx配置为:

java 复制代码
location /vdp {
alias /usr/local/app/dev/vdp/vdp-web/dist/;
try_files $uri $uri/ /vdp/index.html;
index index.html index.htm;
}

/vdp 是 location 的匹配规则;

alias 指定了 location 匹配到的请求所对应的⽂件路径。

下⾯这个配置才是关键:

官⽹对try_files的解释 https://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

try_files 处理在当前上下⽂中执⾏。⽂件的路径是 file根据 root和alias指令从参数构造的。

可以通过在名称末尾指定斜杠来检查⽬录是否存在,例如 $uri/ 。如果未找到任何⽂件, uri 则会进⾏内部重定向到最后⼀个参数中指定的⽂件。

这⾥的配置是为了⽀持 vue 的 history 路由模式,即在浏览器中输⼊URL时,不会向服务器发送请求,⽽是直接在浏览器中显示对应的⻚⾯。因此,这⾥需要将所有请求都重定向到 /vdp/index.html ,以便 vue-router 能够正确地处理路由,此处的 /vdp/index.html 是当前上下⽂中的路径;

总结:我理解的是当⽤户输⼊ www.xxx.com/vdp/home 的时候,浏览器⾸先请求nginx服务器资源,当匹配到 /vdp/ 的时候,服务器返回了 alias ⾥⾯的资源,并在浏览器端创建了

vdp ⽬录,将请求的资源放置于该⽬录下;当继续匹配到 /vdp/home 的时候,由于浏览器不

会向服务器请求资源,所以最后会加载 try_files 中设置的 vdp ⽬录下的 index.htm

相关推荐
青鱼入云11 分钟前
对比nginx、kong、apisix、zuul、gateway网关
nginx·gateway·kong
一枚前端小能手39 分钟前
🔄 重学Vue之nextTick和slot - 从底层实现到实战应用的完整指南
前端·javascript·vue.js
塔能物联运维1 小时前
物联网运维中的容器化服务部署与弹性扩展技术
运维·物联网
Jtti1 小时前
什么是DNS负载均衡?提升网站稳定性与容错性的方法
运维·负载均衡
一嘴一个橘子2 小时前
vue.js 视频截取为 gif - 2(将截取到的gif 转换为base64 、file)
vue.js
迎風吹頭髮2 小时前
Linux内核架构浅谈60-Linux块设备驱动:请求队列与BIO结构的交互流程
linux·运维·交互
TG_yunshuguoji3 小时前
阿里云代理商:阿里云负载均衡是什么?
运维·服务器·阿里云·云计算
你的电影很有趣3 小时前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
小张成长计划..3 小时前
VUE工程化开发模式
前端·javascript·vue.js
七夜zippoe3 小时前
Xshell效率实战系列五:大文件传输封神技——断点续传+压缩传输双buff拉满
运维