Vue 3 和 Vue Router 使用 createWebHistory 配置

liuccn2024-10-21 0:36

在 Vue 3 项目中，如果使用 Vue Router 并希望启用 HTML5 History 模式，需要在创建路由器实例时传入 createWebHistory 作为历史模式的配置。此外，还需要确保在生产环境中设置正确的基本路径（base），这样才能正确处理前端路由。

路由配置

首先，在 router/index.js 文件中，这样配置路由器：

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL || '/'),
  routes: [...], // 定义路由数组
});

export default router;

在这里，import.meta.env.BASE_URL 是从 Vite 环境变量读取的，它允许指定应用程序的基本路径。如果没有设置环境变量，它将默认为 '/'。这个配置项一般对应的就是vite.config.ts文件中的base项的配置。

打印输出看到环境变量中的值：

这一项配置了之后再打包后index.html会是这样：

打包部署到nginx

Nginx 配置

对于 Nginx 的配置，需要确保所有前端路由都能够正确地映射到Vue 应用程序的入口文件（通常是 index.html）。这是因为在 HTML5 History 模式下，URL 看起来像普通的路径，但实际上并不对应于服务器上的物理文件。因此，需要告诉 Nginx 如何处理这些虚拟路径。

以下是一个 Nginx 配置示例，假设应用程序部署在服务器的根目录下：

shell 复制代码

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/your/dist; # 替换为实际 dist 目录路径
    try_files $uri $uri/ /index.html;
  }
}

如果应用程序部署在子路径下，例如 /myapp，需要相应地调整 location 块和 root 指令：

shell 复制代码

server {
  listen 80;
  server_name example.com;

  location /myapp {
    alias /path/to/your/dist; # 替换为实际 dist 目录路径
    try_files $uri $uri/ /myapp/index.html;
  }
}

请确保将 /path/to/your/dist 替换为实际构建输出目录的路径，并且根据实际部署情况调整 server_name 和子路径。

以上配置将确保即使用户直接访问一个特定的路由（例如 http://example.com/myapp/some-route），Nginx 也会正确地提供 index.html，然后由 Vue Router 接管并渲染正确的组件。