vue3项目怎么使用history模式

在 Vue3 中使用 history 模式需要进行以下几个步骤：

1. 在 Vue Router 中设置 `mode` 为 `history`：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
})

2. 在服务器中配置路由重定向，以确保当用户刷新页面时，服务器能够正确地返回对应的页面。

例如，在 Express 中，可以使用以下代码：

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'dist')))
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

app.listen(8080)

这将在服务器端将所有请求都重定向到 Vue 应用的 `index.html` 文件中。

3. 确保使用正确的基本路径。如果您的 Vue 应用将部署在子路径上，例如 `www.example.com/my-app/`，则需要将 `createWebHistory` 函数的参数设置为相应的子路径：

const router = createRouter({
  history: createWebHistory('/my-app/'),
  routes: [...],
})

这将确保路由正确地解析为子路径中的路径。

以上是在 Vue3 中使用 history 模式的基本步骤。