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

相关推荐
今晚吃什么呢?3 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员6 分钟前
Babel工作理解
前端
《独白》17 分钟前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
CopyLower20 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ21 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况21 分钟前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵1 小时前
JavaScript 空对象检测
javascript
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js