Vue 3 和 Vue Router 使用 createWebHistory 配置

在 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 接管并渲染正确的组件。

相关推荐
天天扭码1 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸21 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.24 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom31 分钟前
Fluid:云原生数据加速与管理的简单入门与实战
前端
凉豆菌40 分钟前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司41 分钟前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
鬼面瓷1 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅1 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss
北上ing1 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
纪元A梦1 小时前
华为OD机试真题——推荐多样性(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题