前端开发框架
当前页

基础功能 ​

环境变量配置 ​

用于修改项目的布局、缓存、多语言、组件默认配置，项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production

具体可以参考 Vite 文档

温馨提醒

  • 只有以 VITE_ 开头的变量会被嵌入到客户端侧的包中，你可以项目代码中这样访问它们：
js
console.log(import.meta.env.VITE_PROT);

配置项说明 ​

.env ​

所有环境适用

bash
# 网站标题
VITE_GLOB_APP_TITLE=CPVF Admin
# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符
VITE_GLOB_APP_SHORT_NAME=cpvf_admin
.env.development ​

开发环境适用

bash
# 开发环境
NODE_ENV=development
# 配置优先走mock数据还是后端代理
VITE_MOCK=false
# 主应用
VITE_MICRO=main
# 端口
VITE_PORT=8080

# 接口基础请求地址  通常配置如：http://localhost:9000
VITE_APP_BASE_URL=
# 与VITE_APP_BASE_URL配合 通常配置 如： /api => http://localhost:9000/api
# VITE_APP_BASE_URL_PREFIX=/basic-api
VITE_APP_BASE_URL_PREFIX=
# 代理
VITE_PROXY = [["/sys","http://ip:port/sys"],["/sso","http://ip:port/sso"]]
# 静态资源地址()
VITE_APP_STATIC_URL=

# 构建资源公共路径
VITE_PUBLIC_PATH=/
.env.production ​

生产环境适用

bash
# 开发环境
NODE_ENV=production

# 接口基础请求地址  通常配置如：http://localhost:9000
VITE_APP_BASE_URL=
# 与VITE_APP_BASE_URL配合 通常配置 如： /api => http://localhost:9000/api
# VITE_APP_BASE_URL_PREFIX=/basic-api
VITE_APP_BASE_URL_PREFIX=''
# 代理
VITE_PROXY = [["/basic-api","http://ip:port/api"], ["/sys","http://ip:port/sys"], ["/sso","http://ip:port/sso"]]

# 静态资源地址()
VITE_APP_STATIC_URL=

# 构建资源公共路径
VITE_PUBLIC_PATH=/
vite.config.ts ​
- plugins
	- vue() 配置了 isCustomElement，主要用来过滤micro-app
	- vueJsx()  jsx文件支持
	- createHtmlPlugin() 在index.html中写入环境变量
	- configHmrPlugin()  配置hmr热加载
	- WindiCSS()   使用windicss
  - viteCompression()  编译时使用压缩
  - viteSvgIcons() 配置src/assets/icons下的svg文件以icon的形式进行使用
  - Components()  按需引入ElementPlus，使用ElementPlus组件时无需引用
  - AutoImport()  配合Components
  - vueSetupExtend() 使用setup时定义name <script setup lang="ts" name="xxx">
  - Pages()  文件路由系统
  - Layouts() 配合文件路由系统，提供多布局、自定义布局支持
  - viteMockServe() Mock支持
  - optimizeDeps  强制预加载