引入完整的elementPlus
安装
pnpm i element-plus
引入
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
图标，需单独安装
pnpm i @element-plus/icons-vue
// vue文件 按需引入就可以了
<script lang="ts" setup>
import {Check,Delete
} from '@element-plus/icons-vue'
</script>
配置国际化
// main.ts
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn,
})
打包问题
由于国际化引入的是mjs文件，so需要忽略对他的校验，即可打包成功
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
src别名的配置
// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src}}
})
// tsconfig.json
{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { //路径映射，相对于baseUrl"@/*": ["src/*"] }}
}
如不生效还是有红线，则重启编辑器
环境变量的配置
创建文件
.env.development
.env.production
.env.test
文件内容
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '后台管理'
VITE_APP_BASE_API = '/dev-api'
NODE_ENV = 'production'
VITE_APP_TITLE = '后台管理'
VITE_APP_BASE_API = '/prod-api'
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '后台管理'
VITE_APP_BASE_API = '/test-api'
配置运行命令：package.json
"scripts": {"dev": "vite --open","build:test": "vue-tsc && vite build --mode test","build:pro": "vue-tsc && vite build --mode production"},
通过import.meta.env获取环境变量
