vite vue3下配置history模式路由的步骤记录

下面是详细讲解“vite vue3下配置history模式路由的步骤记录”的完整攻略。

1. 安装`vue-router`

首先，我们需要先安装vue-router，可以使用以下命令：

npm install vue-router@4 --save

2. 配置`vue-router`

在src目录下创建一个router文件夹，在其中创建一个index.js文件，并写入如下内容：

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

const routes = [
  // 在这里配置路由
]

// 使用createWebHistory来创建路由history模式
const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

在routes数组中配置路由信息，在这个例子中，我们配置了两个简单的路由：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
]

这里的path是路由的路径，name是路由的名称，component是相应的组件。

3. 在`main.js`中引入`router`并使用

在main.js中引入router并使用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

4. 配置服务器重定向

如果使用的是history模式，需要在服务器中进行重定向，以便让服务器能够正确地响应路由。

下面是两个示例：

使用Express服务器

这是一个使用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'))
})

const port = process.env.PORT || 80
app.listen(port, () => {
  console.log(`Server started on port ${port}`)
})

使用Nginx服务器

这是一个使用Nginx服务器的示例：

server {
  listen 80;
  server_name yourdomain.com;

  root /var/www/yourdomain.com;
  index index.html;

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