关于前端:vite-配置-alias-别名

vite.config.js 文件

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({plugins: [vue()],
  resolve:{
    alias:{
      '@':'/src/', // 格局肯定要写对喽不然没有代码提醒或者报错
      '@components':'/src/components/',
      '@assets':'/src/assets/',
    }
  }
})

或者数组的模式

import {defineConfig} from 'vite'
import path from "path";
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  resolve: {
    alias: [{
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      },
      {
        find: 'components',
        replacement: path.resolve(__dirname, 'src/components')
      }
    ],
  },
  plugins: [vue()],
});

import {defineConfig} from 'vite'
import path from "path";    //path 引入可能报错能够应用 import {resolve} from 'path'
import vue from '@vitejs/plugin-vue'

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()],
});

留神应用别名后肯定要在 tsconfig.json 中配置

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

}

如果用了 ts 那么还须要在 tsconfig.js 中进行额定配置，留神 path 对象是在 compilerOptions 对象外面

resolve.alias

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

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

当应用文件系统门路的别名时，始终应用绝对路径。相对路径的别名值会被一成不变地应用，因而无奈被失常解析。更高级的自定义解析办法须要通过 插件 实现。

关于前端:vite-配置-alias-别名

办法 1

办法 2