这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战
写在开头
Vue 路由的 url 有两种模式:hash 模式以及 history 模式。
hash 模式在url上面出现一个 # 哈希字符(http://10.1.xx.xx:3006/#/home
),不是很美观,不像正常的 url 一样 http://10.1.xx.xx:3006/home
。
使用 history 模式像正常的 url 一样,还需要后台配置支持 为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id
就会返回 404,这就不好看了。
问题背景
项目最初使用的是 hash 模式,不需要 nginx 配置,可是项目需求有微信支付,支付成功并返回相关页面,在微信支付成功的 redirect_url 中,如果使用 hash,回调地址 哈希字符 # 后面的地址内容都会被自动截取掉,所以需要更改为 history 模式访问,再配置 nginx 过程中,访问成功了 可是页面刷新就 404 了这不是我们想要的,这篇文章完美解决 history 模式 nginx 配置问题,具体可参考修改。
问题解决
百度也是花样多多,各式各样,最终花了半天时间解决 nginx 配置不成功,刷新页面 404 问题。
修改 Vue 项目配置
-
打包工具 base 公共基础路径修改
我这里使用的是 Vite 工具如下:
import { defineConfig } from 'vite' export default defineConfig({ // 省略配置其他部分... base: '/medical-record-front/', // 'medical-record-front' 则是服务端存放的 子目录名称,也就是放 index.html 父目录 })
Vue-cli 脚手架则在 vue.config.js/ts 修改 publicPath 属性 :
module.exports = { // ... publicPath: "/medical-record-front/" }
再次打包可以看
dist/index.html
下:
已经改为了配置的 medical-record-front
绝对路径。
-
vue-router4 路由模式配置
我使用的 vue-router4 版本:
import { createRouter, createWebHistory } from "vue-router"; import routes from "./path"; const router = createRouter({ history: createWebHistory("medical-record-front"), // 服务端子目录名称 routes, });
vue-router其他版本:
new Router({ mode: "history", base: "medical-record-front" })
ok,到这里我们的项目修改已经完成,差最后一步,就是修改服务端的 nginx 中 conf 配置。
修改 Nginx 配置
修改 nginx.conf 配置如下,这里就放关键解决问题的关键性配置:
server {
// ... 省略
// 下面子目录配置
location /medical-record-front/ {
alias /app/wwwroot/medical-record-front/; // 存在 nginx 项目文件位置;注意不能用 root 指定会导致刷新 404 问题!需要用 alias
index index.html;
try_files $uri $uri/ /medical-record-front/index.html;
}
}
alias
不清楚的可以看 链接,try_files
或者可以看 官网。
最终我访问的路径地址: https://xxxx域名.com/medical-record-front/home
刷新或者指定访问都不会出现404了,看到网上配置一些 404 重定向返回首页,个人觉得可以加,可以不加。
总结
按照上述配置完成后,打包 Vue 项目,丢包到服务器端上,参照我的访问路径就ok了(以上操作针对个人项目,供参考!)。