taro 支持多环境 app.config.js

aurhwmvo  于 5个月前  发布在  其他
关注(0)|答案(6)|浏览(56)

这个特性解决了什么问题?

由于公司的产品功能模块较多,多个产品存在相同的页面较多,所有目前所有的产品的代码是一个taro项目管理的,但是 app.config.js 文件对于不同产品的配置是要不同的,每次需要在开发和发布时手动进行注释解决,所以自己通过 cross-evn 进行改造,实现在多种产品配置的环境切换,下面上源码。

这个 API 长什么样?

能更好的支持和vue项目一样的多环境配置,并且支持下面我自己实现的 app.config.js 多环境效果

mwngjboj

mwngjboj1#

  1. 安装 cross-env
  2. 添加 script ,传入 cross-env APP_ENV=pro1 , pro1 为产品1
"build:pro1:weapp": "cross-env APP_ENV=pro1 npm run build:weapp"
  1. 改造前的 app.config.js
// app.config.js
export default 
{
  pages: ["pages/index/index"],
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
};
  1. 改造后 app.config.js
// app.config.js
var app_env = "default";
if (process.env.APP_ENV) {
   app_env = process.env.APP_ENV;
}

const config = require(`./app.config.${app_env}.js`);
export default config;

app.config.js 配置转移到 app.config.default.js

// app.config.default.js
 module.exports = {
   pages: ["pages/index/index"],
   window: {
     backgroundTextStyle: "light",
     navigationBarBackgroundColor: "#fff",
     navigationBarTitleText: "WeChat",
     navigationBarTextStyle: "black",
   },
 };

产品1的配置 app.config.pro1.js

// app.config.pro1.js
 module.exports = {
   pages: ["pages/pro1/index"],
   window: {
     backgroundTextStyle: "light",
     navigationBarBackgroundColor: "#fff",
     navigationBarTitleText: "WeChat",
     navigationBarTextStyle: "black",
   },
 };

以上即可实现,通过 cross-env APP_ENV=pro1 传不同的产品配置,可以选择不同的配置进行编译

"build:pro1:weapp": "cross-env APP_ENV=pro1 npm run build:weapp"

改造后的效果与预期符合,但是发现一个问题:在上面的改造后进行开发,如果修改页面的代码后保存,命令行也显示编译成功,但是无论怎么刷新小程序开发工具,页面还是旧的代码,需要重新执行 npm run build:pro1:weapp 方可,请官方帮忙分析下什么原因,这个需求算是十分合理的需求吧,希望帮忙支持下~

zd287kbt

zd287kbt3#

我这里其实只需要解决下为什么这么改造后不能热更新的问题,本来想试试新版本是否支持这种改造后的热更新,不料 3.5.7 版本有一个问题,使得这个改造直接报错 #12674

u7up0aaq

u7up0aaq4#

借宝地也说一下,页面的config.ts也遇到同样问题,不同平台的配置是不一样,目前不管是在config.ts,还是在vue文件中修改都不管用(甚至在build时会报错),希望能提供一个解决方案。

n1bvdmb6

n1bvdmb65#

@Chen-jj 能解决吗

j2qf4p5b

j2qf4p5b6#

应该能,只是时间问题.

相关问题