环境搭建

区分生产环境和测试环境

一般环境分成四种：

开发环境、测试环境、预发布环境、生产环境。

(1) 创建配置文件

根目录下面创建 4 个文件

环境

.env.development // 开发

.env.production //生产

.env.stage //stage

.env.testing // 测试

(2) 在 env 文件里面写

注意

NODE_ENV 后面的 development 对应每个文件的后缀 比如 stage 里面就改成 stage,production 里面就改成 production

webpack

代码里面写

# just a flag
NODE_ENV = development

# base api
VUE_APP_EE_BASE_API = 'https://www.dev.com'
VUE_APP_DY_BASE_API = 'https://xxxx.com'

在 package.json 里面写命令

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve:stage":"vue-cli-service serve --mode stage",
    "serve:test":"vue-cli-service serve --mode testing"
  },

vite

配置文件

(1) 项目根目录新建.env文件,在文件中配置环境变量比如

• .env

全局环境,没有设置其他环境变量的时候,会加载这个文件里的内容

比如 所有版本都使用的是同一个接口地址的时候,就可以写在一个文件里

NODE_ENV = env
VITE_APP_ENV = env
VITE_NAME = "全局环境"
VITE_BASE_URL = "https://www.baidu.com"
VITE_TARGET = "https://www.jsopy.com"
VITE_AES_KEY="yinjieshuai12345"
VITE_AES_IV="1234567890123456"
# 接口白名单（逗号分隔，支持精确路径和前缀通配符 /*）
VITE_API_WHITELIST="/api/login,/api/register,/public/*"

(2)在项目根目录下(与 package.json 同级)新建 .env.development 文件，在文件中配置环境变量，如：

• .env.development

NODE_ENV = development
VITE_APP_ENV = development
VITE_NAME = "开发环境"
VITE_BASE_URL = "/api"
VITE_TARGET = "https://www.jsopy.com"
VITE_AES_KEY="yinjieshuai12345"
VITE_AES_IV="1234567890123456"
# 接口白名单（开发环境可放宽）
VITE_API_WHITELIST="/api/login,/api/register,/api/refresh,/public/*,/captcha,/mock/*"

(3) 在项目根目录下(与 package.json 同级)新建 .env.production 文件，在文件中配置环境变量，如

• .env.production

生产环境下的配置文件,执行命令 npm run build 命令,会自动加载.env.production 文件

会覆盖.env 这个文件里面定义的环境变量

NODE_ENV = production
VITE_APP_ENV = production
VITE_NAME = "生产环境"
VITE_BASE_URL = "http://xxx.com/api"
VITE_TARGET = "https://www.jsopy.com"
VITE_AES_KEY="yinjieshuai12345"
VITE_AES_IV="1234567890123456"
# 接口白名单（生产环境严格控制）
VITE_API_WHITELIST="/api/login,/api/register,/public/*"

package.json 里面配置

dev 默认在本地开启测试环境的服务(mode = 'development')

start 在本地开启正式环境服务(mode = 'production')

build 默认打包到正式环境(基础配置取.env.production 文件中的配置)

build:env 默认打包到测试环境(基础配置取.env.development 文件中的配置)

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "dev:pro":" vite --mode development",
    "dev:stage":" vite --mode stage",
    "dev:testing":" vite --mode testing",
    "build:dev":" vite build --mode development",
    "build:pro":" vite build --mode production"
  },

具体使用

• .env.[name]是可以自定义的,在 package.json 里面做对应的名称修改

根据 Vite 的预定规则,只有以VITE_开头的变量才会在客户端倍捕获

import.meta.env.MODE：获取当前环境模式，如：development、production、stage、testing 等。然后重启服务

执行 npm run dev 的时候,vite 会自动加载.env.development文件

执行 npm run build 的时候,vite 会自动加载.env.production文件

增加内存打包

安装cross-env 插件

npm i -D cross-env

• 这个安装包就是为了区分平台的差异性

改写脚本

"build:pro": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode production"