vue、react、uniapp配置全局域名、环境变量NODE_ENV、--mode区分开发环境和正式环境

前端项目开发，不同项目环境使用不同的api接口域名（或ip）。不需要通过反复注释代码来解决接口环境问题。

方法一：根据 window.location.host

const baseURL = window.location.host == 'url01' ? 'url01' : 'url02';
// 建议：url01是正式环境，url02是测试环境或者本地调开发用（有预生产环境的再继续写）

方法二：根据 process.env.NODE_ENV（需要搭配 location.host）

全局变量process表示的是当前的node进程，process.env包含着关于系统环境的信息。
vue、react、uni等脚手架会将 process.env.NODE_ENV 配置好了。全局的可以直接拿来用

const baseURL = process.env.NODE_ENV == "development" ? 'url01' : 'url02';
// development 是开发环境
// production 是正式环境（打包后）
// 所以无法单独根据这个 判断线上的正式、测试、预生产环境，可搭配 location.host 进行判断

方法三：引用cross-env

安装命令：

npm方式：
	npm install --save-dev cross-env

cnpm方式：
	cnpm install --save-dev cross-env

yarn方式：
	yarn add cross-env

使用：

{
  "scripts": {
  	// development 
    "dev": "cross-env NODE_ENV=development webpack serve",
    // production 
    "devPRO": "cross-env NODE_ENV=production webpack serve",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

NODE_ENV环境变量将由cross-env设置，打印 process.env.NODE_ENV 就是命令行设置的参数

方法四：vue、uniapp项目：–mode xxx

xxx 自己改变量名

package.json 内 script 命令 添加 --mode xxx

新增文件：

.env.xxx (package.json 同级)

键值对形式，value部分要不要放引号里面都行。

注意：自定义变量名要使用VUE_APP_开头。因为只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

项目中调用：

process.env.VUE_APP_SECRET_CUSTOM_URL
// VUE_APP_SECRET_CUSTOM_URL 仅为案例，自定更换其他名字

方法五：React自定义node、cross-env、webpack等方式不同环境配置命令整理

跳转查看：https://blog.csdn.net/weixin_44461275/article/details/122988359

---

暂时先整理这几个，并非最优解，常见的也有根据webpack+webpack-dev-server做的，就到这里吧。小项目不需要那么多繁琐的步骤