Vue3配置@符号为根路径，在Vue文件中可以正常识别

浅浅的花香味﹌ 2023-10-10 20:01 20阅读 0赞

在开发Vue3项目的时候，需要配置@符号为项目根路径，并且在Vue文件中可以识别到：![c3ed8f01ed5340f88727f757974f2c70.png][]

所以就需要配置一下了，其实这里很简单，先配置一下tsconfig.json如下：

{
      "files": [],
      "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "*.ts"
      ],
      "references": [{ "path": "./tsconfig.node.json" }],
      "compilerOptions": {
        "types": ["element-plus/global"],
        "target": "esnext",
        "module": "esnext",
        "useDefineForClassFields": true,
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        "baseUrl": "./",
        "paths": {
          "@": ["src"],
          "@/*": ["src/*"]
        }
      }
    }

再配置一下vite.config.ts:

![b12494da97d349489e21898cd41e3a55.png][]

配置代码：

import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import { fileURLToPath, URL } from 'node:url'
    
    // https://vitejs.dev/config/
    export default defineConfig(async () => ({
      plugins: [vue()],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      }
    }));

[c3ed8f01ed5340f88727f757974f2c70.png]: https://img-blog.csdnimg.cn/c3ed8f01ed5340f88727f757974f2c70.png
[b12494da97d349489e21898cd41e3a55.png]: https://img-blog.csdnimg.cn/b12494da97d349489e21898cd41e3a55.png