vue、react、uniapp配置全局域名、环境变量NODE_ENV、--mode区分开发环境和正式环境
前端项目开发,不同项目环境使用不同的api接口域名(或ip)。不需要通过反复注释代码来解决接口环境问题。## 方法一:根据 window.location.host```javascriptconst baseURL = window.location.host == 'url01' ? 'url01' : 'url02';// 建议:url01是正式环境,url02是测试环境或者本地调开发用(有
前端项目开发,不同项目环境使用不同的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做的,就到这里吧。小项目不需要那么多繁琐的步骤
更多推荐
所有评论(0)