Vue 3 和 Vue Router 使用 createWebHistory 配置
在 Vue 3 项目中,如果使用 Vue Router 并希望启用 HTML5 History 模式,需要在创建路由器实例时传入 createWebHistory
作为历史模式的配置。此外,还需要确保在生产环境中设置正确的基本路径(base)
,这样才能正确处理前端路由。
路由配置
首先,在 router/index.js
文件中,这样配置路由器:
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 配置示例,假设应用程序部署在服务器的根目录下:
server {
listen 80;
server_name example.com;
location / {
root /path/to/your/dist; # 替换为实际 dist 目录路径
try_files $uri $uri/ /index.html;
}
}
如果应用程序部署在子路径下,例如 /myapp,需要相应地调整 location 块和 root 指令:
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 接管并渲染正确的组件。