vue3与vite中@相对路径的设置

1.出现问题

1.vite中-自动导入样式到多个组件中时,出现报错问题

//vite.config.ts
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src'), // @代替src
    },
  },
  css: {
    // https://cn.vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      less: {
        additionalData: `
           @import "@/assets/styles/variables.less";
           @import "@/assets/styles/mixins.less";
         `,
      },
    },
  },
});

原因分析:

1.@相对路径配置问题导入无法使用@来自动导入

解决步骤:

1.安装 @type/node

npm install @types/node --save-dev

2.在vite.config.ts中配置路径别名@

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'; //导入已经安装的@type/node


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src') // @替代src
    }
  }
})

3.在tsconfig.json文件添加"baseUrl"与"paths"

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    //新增
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4.回到组件中测试@相对路径是否生效