Vue Router 使用 `createWebHistory` 路由后 Nginx 配置详解

LeonGao
1,108 阅读3分钟

在使用 Vue Router 并采用 createWebHistory 创建路由实例时，由于其使用了 HTML5 的 History API，这会导致在部署到服务器上时，直接访问非根路径（如 /about 等二级路由）可能会出现 404 错误。这是因为服务器默认不知道如何处理这些路由请求，此时就需要对 Nginx 进行相应的配置来解决这个问题。

一、Vue Router 的 createWebHistory 简介

在 Vue Router 中，createWebHistory 用于创建一个基于 HTML5 History API 的路由实例。与默认的 createWebHashHistory 不同，createWebHistory 生成的 URL 没有哈希（#）符号，更加美观和符合现代 Web 应用的 URL 规范。例如，createWebHashHistory 下的 URL 可能是 https://example.com/#/about，而 createWebHistory 下的 URL 则是 https://example.com/about。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

二、Nginx 配置解决 404 问题

以下是一个基本的 Nginx 配置示例，用于处理 Vue Router 使用 createWebHistory 后的路由请求，确保能够正确访问各个路由页面：

server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名

    root /path/to/your/vue/app/dist;  # 替换为你的 Vue 应用打包后的 dist 目录路径

    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

上述配置的关键部分是 location / 块中的 try_files 指令：

  1. $uri：尝试匹配请求的 URI。例如，如果请求 /about，Nginx 会先查找服务器上是否存在 /about 这个文件或目录。
  2. $uri/：如果 $uri 不匹配，Nginx 会尝试匹配 /about/ 这样的目录（如果存在）。
  3. /index.html：如果前面的尝试都失败，Nginx 会将请求重定向到 index.html。由于 Vue Router 在 index.html 中会根据当前的 URL 来匹配相应的路由组件并渲染页面，所以能够正确处理非根路径的请求。

三、配置示例说明

  1. listen 和 server_name：listen 80 表示 Nginx 监听 80 端口，server_name 配置为你的实际域名，确保 Nginx 能够正确响应来自该域名的请求。
  2. root：指定 Vue 应用打包后的 dist 目录路径，Nginx 会从这个目录中查找请求的文件。
  3. index：设置默认的索引文件，通常为 index.html。
  4. try_files：按照指定的顺序尝试匹配请求的文件或目录，如果都不匹配，则重定向到 index.html。
  5. error_page 和 location = /404.html：配置 404 错误页面，internal 指令表示该 location 仅用于内部重定向，不会向客户端发送新的 HTTP 请求。

四、注意事项

  1. 路径替换：务必将 root 指令中的路径替换为你实际的 Vue 应用打包后的 dist 目录路径。

  2. 域名配置：确保 server_name 配置为正确的域名，否则可能会导致 Nginx 无法正确响应请求。

  3. HTTPS 配置：如果你的应用使用 HTTPS，还需要配置 SSL 证书等相关内容，这里仅提供了基本的 HTTP 配置示例。

通过以上 Nginx 配置，你可以在使用 Vue Router 的 createWebHistory 后，正确地部署 Vue 应用，并解决 404 等路由访问问题，确保用户能够顺利访问应用的各个页面。

Monorepo 技术延展

解决Vue Router History模式的Nginx部署404问题后，多端场景下还可能面临路由跨容器适配、无侵入扩展需求。Finclip这类平台凭借小程序容器化、标准化SDK能力，可辅助强化路由在多环境的兼容性，与Nginx配置形成部署闭环。这个问题在工程上常见的解法是: 跨端路由适配、容器化部署、标准化SDK集成、无侵入扩展、多环境兼容管控。

avatar
文章
阅读
粉丝