由于公司的产品功能模块较多,多个产品存在相同的页面较多,所有目前所有的产品的代码是一个taro项目管理的,但是 app.config.js 文件对于不同产品的配置是要不同的,每次需要在开发和发布时手动进行注释解决,所以自己通过 cross-evn 进行改造,实现在多种产品配置的环境切换,下面上源码。
app.config.js
cross-evn
能更好的支持和vue项目一样的多环境配置,并且支持下面我自己实现的 app.config.js 多环境效果
mwngjboj1#
cross-env
script
cross-env APP_ENV=pro1
pro1
"build:pro1:weapp": "cross-env APP_ENV=pro1 npm run build:weapp"
// app.config.js export default { pages: ["pages/index/index"], window: { backgroundTextStyle: "light", navigationBarBackgroundColor: "#fff", navigationBarTitleText: "WeChat", navigationBarTextStyle: "black", }, };
// 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
// 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
// app.config.pro1.js module.exports = { pages: ["pages/pro1/index"], window: { backgroundTextStyle: "light", navigationBarBackgroundColor: "#fff", navigationBarTitleText: "WeChat", navigationBarTextStyle: "black", }, };
以上即可实现,通过 cross-env APP_ENV=pro1 传不同的产品配置,可以选择不同的配置进行编译
改造后的效果与预期符合,但是发现一个问题:在上面的改造后进行开发,如果修改页面的代码后保存,命令行也显示编译成功,但是无论怎么刷新小程序开发工具,页面还是旧的代码,需要重新执行 npm run build:pro1:weapp 方可,请官方帮忙分析下什么原因,这个需求算是十分合理的需求吧,希望帮忙支持下~
npm run build:pro1:weapp
dhxwm5r42#
@Chen-jj 怎么看
zd287kbt3#
我这里其实只需要解决下为什么这么改造后不能热更新的问题,本来想试试新版本是否支持这种改造后的热更新,不料 3.5.7 版本有一个问题,使得这个改造直接报错 #12674
3.5.7
u7up0aaq4#
借宝地也说一下,页面的config.ts也遇到同样问题,不同平台的配置是不一样,目前不管是在config.ts,还是在vue文件中修改都不管用(甚至在build时会报错),希望能提供一个解决方案。
n1bvdmb65#
@Chen-jj 能解决吗
j2qf4p5b6#
应该能,只是时间问题.
6条答案
按热度按时间mwngjboj1#
cross-env
script
,传入cross-env APP_ENV=pro1
,pro1
为产品1app.config.js
app.config.js
app.config.js
配置转移到app.config.default.js
产品1的配置
app.config.pro1.js
以上即可实现,通过
cross-env APP_ENV=pro1
传不同的产品配置,可以选择不同的配置进行编译改造后的效果与预期符合,但是发现一个问题:在上面的改造后进行开发,如果修改页面的代码后保存,命令行也显示编译成功,但是无论怎么刷新小程序开发工具,页面还是旧的代码,需要重新执行
npm run build:pro1:weapp
方可,请官方帮忙分析下什么原因,这个需求算是十分合理的需求吧,希望帮忙支持下~dhxwm5r42#
@Chen-jj 怎么看
zd287kbt3#
我这里其实只需要解决下为什么这么改造后不能热更新的问题,本来想试试新版本是否支持这种改造后的热更新,不料
3.5.7
版本有一个问题,使得这个改造直接报错 #12674u7up0aaq4#
借宝地也说一下,页面的config.ts也遇到同样问题,不同平台的配置是不一样,目前不管是在config.ts,还是在vue文件中修改都不管用(甚至在build时会报错),希望能提供一个解决方案。
n1bvdmb65#
@Chen-jj 能解决吗
j2qf4p5b6#
应该能,只是时间问题.