vite2.1 最新alias别名设置方式

vite.config.js 别名配置

resolve.alias

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

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

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

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

  import {
  defineConfig
  } from ‘vite’
  import path from “path”;
  import vue from ‘@vitejs/plugin-vue’

  // https://vitejs.dev/config/
  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()],
});

注意要导入path啊，还有vite.config配置要关项目重启，老铁踩坑点赞