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

矫情吗；* 2021-09-07 06:22 1367阅读 0赞

vite.config.js 别名配置

### resolve.alias ###

*  **类型：** `Record<string, string> | Array<{ find: string | RegExp, replacement: string }>`
    
    将会被传递到 `@rollup/plugin-alias` 作为 [entries][] 的选项。也可以是一个对象，或一个 `{ find, replacement }` 的数组.
    
    当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。
    
    更高级的自定义解析方法可以通过 [插件][Link 1] 实现。

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配置要关项目重启，老铁踩坑点赞

[entries]: https://github.com/rollup/plugins/tree/master/packages/alias#entries
[Link 1]: https://cn.vitejs.dev/guide/api-plugin.html