参考:https://blog.csdn.net/perfect2011/article/details/129930819
1.新建环境配置文件,根目录
.env 基础系统变量,无论何种环境,都可使用其中配置的值,其他环境中的变量会覆盖.env中的同名变量。
.env.development 开发环境
.env.production 生产环境
.env.staging 测试环境

2.vue3使用vite进行编译,所以变量都要以 VITE_ 开头,例如.env.development中
# 开发环境变量
NODE_ENV = 'development'
VITE_TITLE = '开发环境Title'

3.使用多环境配置,package.json文件
"scripts": {
    "dev": "vite --mode development",
    "stage": "vite --mode staging",
    "prod": "vite --mode production",
    "preview": "vite preview",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:stage": "vite build --mode staging"
  },


4.使用环境变量 import.meta.env.VITE_TITLE
当使用 cnpm run dev 的时候,这个值就是 开发环境Title
cnpm run stage 就是 测试环境Title
cnpm run build 默认就是生产环境
如果编译工具是webpack,那就是用process.env.VITE_TITLE

posted on 2024-04-03 17:10  邢帅杰  阅读(1029)  评论(0编辑  收藏  举报