Vue3配置@别名

2,667 阅读1分钟

"@":配置别名,方便快捷定位目录地址

vue3 @

vite.config.ts

image.png

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"),
    },
  },
  // 配置less
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 配置less 全局变量
        additionalData: '@import "@/assets/styles/index.less";',
      },
    },
  },
});

tsconfig.json

image.png

"baseUrl": ".",
"paths": {
    "@/*": ["src/*"]
  }
PS:其他报错

image.png

解决办法:

文件:tsconfig.node.json 添加代码
{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports":true, ++
  },
  "include": ["vite.config.ts"]
}