安装配置

通过包管理工具进行Vue Router的安装：npm install vue-router@4

---

基本配置

我们可以对路径别名进行配置，通过@符号进行文件路径的查找，要使用@符号来代替绝对路径的src文件夹，我们需要对其进行配置，在vite.config.js文件中添加一个resolve属性：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {  // 配置路径别名
      '@': path.resolve(__dirname, 'src')  // 用@代表src文件夹
    }
  }
})

后续当我们输入@符时，就找到了项目中的src目录，后续访问文件就不需要使用相对路径进行查找文件了，直接使用@，在src文件中开始进行查找即可，但是使用@符是没有路径提示的，为了实现路径提示，我们需要在根目录新建一个jsconfig.json的文件，这个文件只针对.js文件有效，如果用的是ts语法，需要配置tsconfig.json的文件：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]  // 配置@符号指向src目录及其子目录
        }
    }
}

但是，ctrl+鼠标点击路径，跳转到这个文件会失效，我们需要安装一个插件：别名路径跳转，安装完后就可以进行正常的跳转了

对于vite中我们使用@符号来代替当前目录的src文件夹，可以在vite.config.js文件中进行以下的配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {'@': path.resolve(__dirname, 'src')}  // @符就是当前目录的src
    },
})