Vue3 + Vue-router4 解决 history 模式项目访问以及 404 问题

10,060 阅读3分钟

这是我参与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 下:

image-20210805100418683.png

已经改为了配置的 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了(以上操作针对个人项目,供参考!)。