1、环境变量process.env配置

vue-cli中

注意：变量名必须以 VUE_APP_ 开头，这样才能在项目中被识别为环境变量。

新建文件.env.development

VUE_APP_API_URL=http://api.example.com
VUE_APP_ENV=development

新建文件.env.production

VUE_APP_API_URL=http://api.example.com
VUE_APP_ENV=production

vue中获取环境变量

console.log(process.env, 'process.env');

vite中
新建文件.env.development

NODE_ENV="development"
VITE_BASE_URL="http://127.0.0.0:8080"

新建文件.env.production

NODE_ENV="production"
VITE_BASE_URL="http://127.0.0.0:8080"

vite中获取环境变量

console.log(import.meta.env, 'process.env');

2、vue package.json多环境配置

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint",//新增development环境，相当于serve"serve:dev": "vue-cli-service serve --mode development",//新增production环境"serve:prod": "vue-cli-service serve --mode production"},

如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令：

npx vue-cli-service serve

vue-cli-service serve其他用法

用法：vue-cli-service serve [options] [entry]选项：--open    在服务器启动时打开浏览器--copy    在服务器启动时将 URL 复制到剪切版--mode    指定环境模式 (默认值：development)--host    指定 host (默认值：0.0.0.0)--port    指定 port (默认值：8080)--https   使用 https (默认值：false)举例："scripts": {"serve": "vue-cli-service serve  --open","serve:dev": "vue-cli-service serve --mode development --open",},

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口 (默认值：src/main.js，TypeScript 项目则为 src/main.ts)，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

vue-cli-service build其他用法

用法：vue-cli-service build [options] [entry|pattern]选项：--mode        指定环境模式 (默认值：production)--dest        指定输出目录 (默认值：dist)--modern      面向现代浏览器带自动回退地构建应用--target      app | lib | wc | wc-async (默认值：app)--name        库或 Web Components