vue3 vue-router去掉 #

在 Vue 3 中，如果使用的是 Vue Router 并且想要在打包后的应用程序中去掉 URL 中的 #（即 hash 模式），需要使用历史模式（History Mode），这通常是通过 HTML5 History API 实现的。

要在 Vue Router 中使用历史模式，需要在创建路由实例时指定 history 配置选项，并使用 createWebHistory 函数。以下是如何设置的一个例子：

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

// 路由定义
const routes = [
  // ...定义路由
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL), // 使用历史模式
  routes,
});

export default router;

注意，import.meta.env.VITE_BASE_URL 是应用基础路径，在使用Vite的情况下，创建.env.production文件，配置环境变量。

例如，如果应用部署在服务器根目录下，可以将其设置为 /：

VITE_BASE_URL=/

如果应用部署在子路径下，比如 /my-app/，那么应该设置：

VITE_BASE_URL=/my-app/

注意：在 Vite 中，所有的环境变量都需要以 VITE_ 开头才能在客户端代码中访问。

当使用历史模式时，服务器需要配置以支持所有的路由。因为在历史模式下，URL 看起来像正常的 path，所以当用户直接访问或刷新页面时，服务器需要正确地返回应用程序的 index.html 文件。如果服务器没有正确配置，用户可能会收到 404 错误。

对于不同的服务器，配置方式可能会有所不同。以下是一些常见的服务器配置示例：

Apache

在 Apache 服务器上，你可以使用 .htaccess 文件来配置重写规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

在 Nginx 服务器上，你可以在配置文件中添加一个 try_files 指令：

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