把「权限路由动态注册」与「Element Plus 按需引入」这两大核心模块整合一份可以直接复制使用的vite.config.ts和main.ts完整示例。1. 完整vite.config.ts示例这份配置整合了路径别名、Element Plus 组件与 API 自动导入、以及开发环境的跨域代理。// vite.config.tsimport{fileURLToPath,URL}fromnode:urlimport{defineConfig,loadEnv}fromviteimportvuefromvitejs/plugin-vueimportAutoImportfromunplugin-auto-import/viteimportComponentsfromunplugin-vue-components/viteimport{ElementPlusResolver}fromunplugin-vue-components/resolversexportdefaultdefineConfig(({mode}){constenvloadEnv(mode,process.cwd())return{plugins:[vue(),// 1. 自动导入 Vue / VueRouter / Pinia 的 API (ref, computed, useRouter 等)AutoImport({resolvers:[ElementPlusResolver()],// 自动导入 ElMessage 等 JS APIimports:[vue,vue-router,pinia],dts:src/types/auto-imports.d.ts,// 生成 TS 提示文件}),// 2. 自动导入 Element Plus 组件 (el-button, el-form 等)Components({resolvers:[ElementPlusResolver()],dirs:[src/components],// 同时支持你自定义的全局组件自动导入dts:src/types/components.d.ts,}),],resolve:{alias:{:fileURLToPath(newURL(./src,import.meta.url)),},},server:{port:5173,open:true,proxy:{/api:{target:env.VITE_API_BASE_URL,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,),},},},}})2. 完整main.ts示例由于配置了按需引入main.ts变得非常干净。我们只需挂载路由和 Pinia不需要全局引入 Element Plus 的样式或组件。// main.tsimport{createApp}fromvueimport{createPinia}frompiniaimportAppfrom./App.vueimportrouterfrom./router// 引入全局样式重置或自定义的全局 CSS 变量按需import/assets/styles/reset.scssconstappcreateApp(App)// 挂载核心插件app.use(createPinia())app.use(router)// 挂载应用app.mount(#app)3. 关键联动与注意事项TS 类型支持配置完成后插件会在src/types/下自动生成auto-imports.d.ts和components.d.ts。请确保你的tsconfig.app.json包含了这些类型声明否则 IDE 可能会在el-button或ElMessage上标红权限路由的无缝配合在权限路由的beforeEach守卫中当你使用router.addRoute()动态添加页面时这些页面内部依然可以无缝使用el-table、ElMessage等组件和 API插件会自动识别并打包对应的样式和代码无需在路由配置中做任何额外处理。主题定制如果你需要修改 Element Plus 的主题色直接在App.vue的style或全局样式中覆盖 CSS 变量即可有了这套整合后的基础配置你的项目不仅首屏加载极快而且开发体验也非常流畅。接下来你可以直接在这个基础上编写你的业务组件和接口了
方法实战解析)
