Vue.js - 使用History模式路由时Nginx的配置方案（附样例）

2021-12-02 发布：hangge 阅读：3521

vue-router 默认路由模式为 hash 模式，该模式是使用 url 的 hash 来模拟一个完整的 url。但使用这种模式，URL 中会带一个 # 号（比如 http://127.0.0.1:9090/#/about），比较丑，不像是正常的 url。
除了默认的 hash 模式外，我们也可以用路由的 history 模式。当我们使用 history 模式时，URL 就像正常的 url 了，例如 http://127.0.0.1:9090/about。不过要使用这种模式，还需要后台服务端的支持。下面以使用 Nginx 为例，演示如何进行配置。

需要后台配置的原因：

因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://127.0.0.1:9090/about 时，服务端以为没有找到对应文件，就会返回 404 错误。
因此我们要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是我们 app 依赖的页面。

情况一：项目直接使用根域名，没有二级路径

1，Nginx 配置修改

这种情况是同一个域名下只有一个项目，没有其他二级路径，因此 root 直接指向目标文件夹，即包含 index.html 的文件夹路径即可。

提示：try_files 是实现 History 模式的关键配置。该指令作用是按指定的 file 顺序查找存在的文件，并使用第一个找到的文件进行请求处理。

    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /Volumes/BOOTCAMP/Vue/hangge-app/dist;
            try_files $uri $uri/ /index.html;
            index  index.html;
            add_header Access-Control-Allow-Origin *;
        }

        #error_page  404              /404.html;

2，Vue 项目配置

Vue 项目这边我们只需要将 VueRouter 的 mode 设置为 history 即可：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

3，运行测试

重启 Nginx 服务，访问一个路由路径为 /about 页面效果如下：

情况二：项目使用二级路径

1，Nginx 配置修改

（1）如果同一个域名下有多个项目，那么不同项目就需要用二级路径来区分了。假设我们使用 /hangge 作为该项目的二级域名，那么 Nginx 这边配置如下：

注意：这里我们指定文件路径使用的是 alias，而不是 root。

    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /hangge {
            alias   /Volumes/BOOTCAMP/Vue/hangge-app/dist;
            try_files $uri $uri/ /hangge/index.html;
            index  index.html;
            add_header Access-Control-Allow-Origin *;
        }

        #error_page  404              /404.html;

2，Vue 项目配置修改

（1）首先我们修改路由配置，由于现在使用 /hangge 作为该项目的二级域名，那么路由的 base 则设置成 /hangge

const router = new VueRouter({
  mode: 'history',
  base: '/hangge',
  routes
})

（2）如果项目是 vue-cli 4 搭建的，需要修改 vue.config.js 文件，将 publicPath 属性设置为 './'。

提示：vue.config.js 是一个可选的配置文件，如果项目根目录不存在该文件，可以手动创建 (和 package.json 同级) 。

module.exports = {
   publicPath: './'
}

而如果项目是 vue-cli 3.X 搭建的，同样是修改 vue.config.js 文件，不过是将 baseUrl 属性设置为 './'

module.exports = {
   baseUrl: './'
}

3，运行测试

重启 Nginx 服务，访问一个路由路径为 /about 页面效果如下：