因需求只涉及微信小程序,这里仅以小程序为例介绍。
具体搭建过程参照官网目录 快速开始,搭建完成后使用命令npm dev:weapp
运行、npm run build:weapp
进行打包。
查看package.json可知,npm dev:weapp
命令内容实际上是运行npm run build:weapp
加上--watch
。
需解决问题: 开发时需使用开发环境API请求接口、提交测试时需要使用测试环境API请求接口、上线时需要使用线上环境API请求接口;开发过程中可任意切换这三种环境进行本地调试。
Trao本身提供process.env.NODE_ENV进行区分开发和打包(线上)环境。显然,这并不能满足如上需求。
如下,笔者提供的解决方案:
- 打开文件package.json;
- 修改
"build:weapp": "taro build --type weapp"
为"npm build:weapp:dev": "cross-env BUILD_ENV=dev taro build --type weapp",
; - 修改
"dev:weapp": "npm run build:weapp -- --watch"
,为"dev:weapp": "npm run build:weapp:dev -- --watch",
; - 添加命令
"test:weapp": "npm run build:weapp:test -- --watch",
、"prd:weapp": "npm run build:weapp:prd -- --watch",
、"build:weapp:test": "cross-env BUILD_ENV=test taro build --type weapp",
、"build:weapp:prd": "cross-env BUILD_ENV=prd taro build --type weapp"
;
做了如上修改后,通过命令npm run dev:weapp
或者 npm run test:weapp
或者 npm run prd:weapp
运行项目即可,对应三种不同的开发环境。更重要的是,由于这些命令实际是对打包命令的引用,故上线前你只需执行npm run prd:weapp
即可,执行此命令后亦可在本地进行代码修改等操作。
你以为这么做就成功了吗???
做完以上修改后你会发现,在项目中根本无法获取到process.env.BUILD_ENV。经过在整个项目中进行关键字NODE_ENV
搜索后,在项目文件config/index.js
下做出如下更改:
module.exports = function(merge) {
const buildConfig = {
env: {
BUILD_ENV: process.env.BUILD_ENV
}
};
return merge(
{},
config,
process.env.NODE_ENV === "development"
? require("./dev")
: require("./prod"),
buildConfig
);
};
完结,撒花。