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配置要關項目重啟，老鐵踩坑點贊

?