【vue/react/小程序】环境配置,以及小程序如何动态配置appid

不管是使用vue、react还是小程序都需要配置运行环境(开发环境、测试环境、生产环境)。
一、Vue/React 配置环境

javascript 复制代码
// 1.在package.json中的scripts脚本中配置,cross-env跨平台
"scripts": {
	"dev": "node scripts/start.js",
	"serve": "cross-env NODE_ENV=development vue-cli-service && node scripts/start.js",
	"dev:h5-dev": "cross-env NODE_ENV=development node scripts/start.js",
	"dev:h5-prod": "cross-env NODE_ENV=production node scripts/start.js",
	// "build": "cross-env NODE_ENV=development node scripts/build.js",
	"build": "vue-cli-service node operateAppId.js",
	"build:h5-dev": "cross-env NODE_ENV=development ode scripts/build.js node operateAppId.js",
	"build:h5-prod": "cross-env NODE_ENV=production ode scripts/build.js node operateAppId.js",
}
// 2.运行上面脚本中的指令即可执行对应的环境,然后使用如下方法获取环境
// 只有NODE_ENV、BASE_URL、VUE_APP_XXX开头的变量才会被存放在DefinePlugin中,才能使用process.env.直接获取
process.env.NODE_ENV

二、小程序如何动态配置appid

javascript 复制代码
/**
项目中遇到这样一个需求,开发了一套小程序代码,通过设置不同的appid,把这套代码发布到不同的小程序上。
要通过打包命令设置appid,通过写个获取project.config.json中appid和修改project.config.json中appid的脚本去操作。
注意修改appid的脚本只能写在项目的根目录下面
*/
// operateAppId.js
const fs = require('fs');

// 从命令行参数中获取 AppID
const appId = process.env.APP_ID;

// 读取 project.config.json 文件
fs.readFile('project.config.json', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading project.config.json:', err);
    return;
  }

  try {
    // 解析 JSON
    const config = JSON.parse(data);
    // 替换 AppID
    config.appid = appId;
    // 将更新后的配置写回文件
    fs.writeFile('project.config.json', JSON.stringify(config, null, 2), 'utf8', (err) => {
      if (err) {
        console.error('Error writing project.config.json:', err);
        return;
      }
      console.log('AppID updated successfully in project.config.json');
    });
  } catch (error) {
    console.error('Error parsing project.config.json:', error);
  }
});

/**
	最后在package.json 中的 scripts 部分添加一个脚本来执行构建,并传递 AppID 作为参数。
	设置appid的命令:set APP_ID=wx674635672123452&&npm run build:h5-dev
*/
"scripts": {
  "build": "node operateAppId.js"
}
相关推荐
Goona_8 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
知识分享小能手10 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小511 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人12 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟14 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄14 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐14 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序
说私域17 小时前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
pearbing1 天前
B站排名优化:知识、娱乐、生活类内容的差异化实操策略
人工智能·微信·小程序·生活·娱乐
流***陌1 天前
旧物新生:一款回收小程序如何让环保成为举手之劳
小程序