vite配置alias

vite.config.js 别名配置

resolve.alias
类型： Record | Array<{ find: string | RegExp, replacement: string }>

将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组.

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。

更高级的自定义解析方法可以通过 插件 实现。

import {defineConfig} from 'vite'
import path from "path";    //path引入可能报错可以使用 import {resolve} from 'path'
import vue from '@vitejs/plugin-vue'
 
 //方法一
 export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      '@':'/src/',      //格式一定要写对喽不然没有代码提示或者报错
    }
  }
})

 //方法二
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "components": path.resolve(__dirname, "src/components"),
      "styles": path.resolve(__dirname, "src/styles"),
      "plugins": path.resolve(__dirname, "src/plugins"),
      "views": path.resolve(__dirname, "src/views"),
      "layouts": path.resolve(__dirname, "src/layouts"),
      "utils": path.resolve(__dirname, "src/utils"),
      "apis": path.resolve(__dirname, "src/apis"),
      "dirs": path.resolve(__dirname, "src/directives"),
    },
  },
  plugins: [vue()],
});

//或者 数组的形式

import {
  defineConfig
} from 'vite'
import path from "path";
import vue from '@vitejs/plugin-vue'
 
 
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [{
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      },
      {
        find: 'components',
        replacement: path.resolve(__dirname, 'src/components')
      }
    ],
  },
  plugins: [vue()],
});

注意使用别名后一定要在tsconfig.json中配置

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]     //格式一定要写对符号*不能少不然找不到@或者没有代码提示
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],

}

官网链接