Reactjs 可互换API根url

我有一个由Webpack和Gulp处理的项目。所有API都使用单个ROOT_URL变量并附加字符串从后端获取信息

对于多个部署，我有来自不同数据库的不同后端服务器。目前，对于每个更新，我必须更改根URL，并将项目捆绑到每个单独的服务器中

---

理想情况下，我只想将一个包传递给每个部署的服务器，这样每个服务器都将引用一个包含各自根URL的本地JS文件。是否有办法做到这一点和/或是否有行业标准？

任何时候，只要服务器不同，通常都会使用环境变量。如果在javascript spa中需要它，则必须将环境变量从服务器传递到javascript（如果使用节点，则可能通过类似ejs的模板引擎）。最终如何做到这一点取决于您使用的后端技术。

只要您有一个因服务器而异的东西，通常您都会使用环境变量。如果在javascript spa中需要它，则必须将环境变量从服务器传递到javascript（如果使用节点，则可能通过类似ejs的模板引擎）。最终如何做到这一点取决于您使用的后端技术。

通过Webpack，您可以指定配置文件的位置。我使用它来分别配置

dev

和

production

configures。您可以使用它为每个环境创建一个单独的配置文件，用于为您更新根URL

  "scripts": {
    "dev": "webpack --config ./src/config/dev.config.js",
    "prod": "webpack --config ./src/config/prod.config.js"
  },

---

使用Webpack，您可以指定配置文件的位置。我使用它来分别配置

dev

和

production

configures。您可以使用它为每个环境创建一个单独的配置文件，用于为您更新根URL

  "scripts": {
    "dev": "webpack --config ./src/config/dev.config.js",
    "prod": "webpack --config ./src/config/prod.config.js"
  },

---

您可以使用Webpack的DefinePlugin定义环境变量

假设您有一个部署脚本

npm run deploy

在

webpack.config.js中添加
DefinePlugin

module.exports = {
  entry: 'app.js',
  plugins: [
     new webpack.DefinePlugin({
       'process.env.API_ROOT': JSON.stringify(process.env.API_ROOT)
     })
  ]
}

然后在代码中：

api.js

var url = process.env.API_ROOT + '/resource'
fetch(url).then(function(){
  // do stuff
})

然后在部署时可以定义不同的API根

API\u根目录=https://api1.com npm运行部署
（将使用API 1部署代码）

API\u根目录=https://api2.com npm运行部署
（将使用API 2部署代码）

。。等等Webpack将自动用正确的URL替换代码中出现的所有
process.env.API\u ROOT
。
您可以使用Webpack的DefinePlugin定义环境变量

假设您有一个部署脚本
npm run deploy

在
webpack.config.js中添加
DefinePlugin

module.exports = {
  entry: 'app.js',
  plugins: [
     new webpack.DefinePlugin({
       'process.env.API_ROOT': JSON.stringify(process.env.API_ROOT)
     })
  ]
}

然后在代码中：

api.js

var url = process.env.API_ROOT + '/resource'
fetch(url).then(function(){
  // do stuff
})

然后在部署时可以定义不同的API根

API\u根目录=https://api1.com npm运行部署
（将使用API 1部署代码）

API\u根目录=https://api2.com npm运行部署
（将使用API 2部署代码）

。。等等Webpack将自动用正确的URL替换代码中出现的所有
process.env.API\u ROOT
。
我的问题更多是关于部署的。我的所有API都使用一个ROOT_URL变量来确定后端地址（即使用哪个数据库）。目前在安装中，我必须转到每个部署服务器，将根URL更改为适当的地址，然后构建分发项目。有没有更有效的方法？我不知道ROOT_URL变量存储和设置在哪里？在前端的某个地方，服务器或后端数据库.yml？它位于项目中的root_url.jsx文件中。您可以在示例中发布该文件吗？确实有很多不同的方法可以实现你想要的，但是不知道你的系统是如何工作的很难。我的问题更多的是关于部署。我的所有API都使用一个ROOT_URL变量来确定后端地址（即使用哪个数据库）。目前在安装中，我必须转到每个部署服务器，将根URL更改为适当的地址，然后构建分发项目。有没有更有效的方法？我不知道ROOT_URL变量存储和设置在哪里？在前端的某个地方，服务器或后端数据库.yml？它位于项目中的root_url.jsx文件中。您可以在示例中发布该文件吗？确实有很多不同的方法可以实现您的目标，但如果不知道您的系统是如何工作的，这很难。此解决方案是否需要Webpack创建新的捆绑包？是的，每个部署都将是一个新的构建。我正在寻找一个解决方案，以便Webpack可以引用外部文件。这样，每台服务器都可以有不同的根Url文件，我只需将同一个捆绑包部署到所有实例。此解决方案是否需要Webpack创建新捆绑包？是的，每个部署都将是一个新版本。我正在寻找一个解决方案，以便Webpack可以引用外部文件。这样，每个服务器都可以有不同的根Url文件，我只需要将相同的包部署到所有实例