项目配置

项目配置

环境变量配置

本文将介绍一些常用的项目配置，方便开发者可以根据需求进行定制化改造。项目的环境变量配置位于项目根目录下

mars-mgn-vue
|-- .env # 全局默认环境配置文件（所有环境共享）
|-- .env.dev # （可忽略）
|-- .env.local # 本地开发专用配置文件
|-- .env.prod  # 生产环境（production）配置文件
|-- .env.stage # （可忽略）
|-- .env.test # （可忽略）

环境变量命名规则

• 以 VITE_ 为前缀（Vue3 中 Vite 要求，确保变量可通过 import.meta.env 访问）。
• 全大写字母，单词间用下划线分隔（如 VITE_APP_PORT）。

npm scripts

文件：package.json

• "dev": "vite --mode env.local"：pnpm run dev命令会调用.env.local配置

"scripts": {
    "i": "pnpm install",
    "dev": "vite --mode env.local",
    "dev-server": "vite --mode dev",
    "ts:check": "vue-tsc --noEmit",
    "build:local": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
    "build:dev": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode dev",
    "build:test": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode test",
    "build:stage": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode stage",
    "build:prod": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode prod",
    "serve:dev": "vite preview --mode dev",
    "serve:prod": "vite preview --mode prod",
    "preview": "pnpm build:local && vite preview",
    "clean": "npx rimraf node_modules",
    "clean:cache": "npx rimraf node_modules/.cache",
    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:style": "stylelint --fix \"./src/**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c "
  },

.env

全局默认环境配置文件（所有环境共享）

• 标题
• 验证码的开关
• 注册功能的开关

# 标题
VITE_APP_TITLE=火星信息平台

# 项目本地运行端口号
VITE_PORT=8080

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN=true

# 租户开关
VITE_APP_TENANT_ENABLE=false

# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=false

# 注册功能的开关
VITE_APP_REGISTER_ENABLE=true

# 文档地址的开关
VITE_APP_DOCALERT_ENABLE=false

# 百度统计
# VITE_APP_BAIDU_CODE = 

# 默认账户密码
VITE_APP_DEFAULT_LOGIN_TENANT = admin
VITE_APP_DEFAULT_LOGIN_USERNAME = admin
VITE_APP_DEFAULT_LOGIN_PASSWORD = admin123

.env.local

本地开发专用配置文件

• 请求路径：指向后端地址
• 验证码的开关

# 本地开发环境：本地启动所有项目（前端、后端、APP）时使用，不依赖外部环境
NODE_ENV=development

VITE_DEV=true

# 请求路径
VITE_BASE_URL='http://localhost:8000'

# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server

# 接口地址
VITE_API_URL=/admin-api

# 是否删除debugger
VITE_DROP_DEBUGGER=false

# 是否删除console.log
VITE_DROP_CONSOLE=false

# 是否sourcemap
VITE_SOURCEMAP=false

# 打包路径
VITE_BASE_PATH=/

# GoView域名
VITE_GOVIEW_URL='http://127.0.0.1:3000'

.env.prod

生产环境（production）配置文件

# 生产环境：只在打包时使用
NODE_ENV=production

VITE_DEV=false

# 请求路径
VITE_BASE_URL='http://localhost:8000'

# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
VITE_UPLOAD_TYPE=server

# 接口地址
VITE_API_URL=/admin-api

# 是否删除debugger
VITE_DROP_DEBUGGER=true

# 是否删除console.log
VITE_DROP_CONSOLE=true

# 是否sourcemap
VITE_SOURCEMAP=false

# 打包路径
VITE_BASE_PATH=/

# 输出路径
VITE_OUT_DIR=dist-prod

# GoView域名
VITE_GOVIEW_URL='http://127.0.0.1:3000'

使用示例

• 使用示例

console.log(import.meta.env.VITE_APP_TITLE)

• 使用示例2

const isRegisterEnabled = computed(() => import.meta.env.VITE_APP_REGISTER_ENABLE === 'true')

<XButton
    v-if="isRegisterEnabled"
    :title="t('login.btnRegister')"
    class="w-[100%]"
    @click="setLoginState(LoginStateEnum.REGISTER)"
  />

参考资料

• 项目配置