如何为Grails/VueJS项目的多AWS环境配置不同SERVER_URL

针对你的Grails/VueJS多环境部署需求，我们可以通过扩展Vue的环境配置体系来实现每个AWS环境对应独立的SERVER_URL，具体步骤如下：

1. 创建多环境配置文件 #

根据你四个AWS环境的命名（比如dev、test、staging、prod），在Vue项目里创建对应的环境配置文件：

• 若使用Vue CLI 2：在config目录下创建env.dev.js、env.test.js、env.staging.js、env.prod.js
• 若使用Vue CLI 3+：在项目根目录创建.env.dev、.env.test、.env.staging、.env.prod

以Vue CLI 2的env.prod.js为例，每个文件里定义对应环境的SERVER_URL：

module.exports = {
  NODE_ENV: '"production"',
  SERVER_URL: '"https://your-prod-aws-domain.com"'
}

其他文件仅需替换SERVER_URL为对应环境的域名即可。

2. 修改Webpack打包配置（Vue CLI 2专属） #

打开build/webpack.prod.conf.js，把原来固定加载prod.env.js的逻辑改成根据环境变量动态加载：

// 替换原来的 const env = require('../config/prod.env.js')
const env = require(`../config/env.${process.env.BUILD_ENV || 'prod'}.js`)

3. 扩展package.json的构建命令 #

在package.json的scripts字段中，添加对应环境的构建指令，同时兼容跨平台环境变量设置：

"scripts": {
  "build:dev": "cross-env BUILD_ENV=dev node build/build.js",
  "build:test": "cross-env BUILD_ENV=test node build/build.js",
  "build:staging": "cross-env BUILD_ENV=staging node build/build.js",
  "build:prod": "cross-env BUILD_ENV=prod node build/build.js"
}

先安装依赖包cross-env以确保Windows/Linux环境都能正常识别变量：

npm install cross-env --save-dev

4. Vue CLI 3+ 项目的简化配置 #

如果是Vue CLI 3或更高版本，步骤更简洁：

• 在每个.env.[环境名]文件中定义：

NODE_ENV=production
VUE_APP_SERVER_URL=https://your-env-domain.com

• 然后在package.json中添加脚本：

"scripts": {
  "build:dev": "vue-cli-service build --mode dev",
  "build:test": "vue-cli-service build --mode test",
  "build:staging": "vue-cli-service build --mode staging",
  "build:prod": "vue-cli-service build --mode prod"
}

5. 代码中调用配置的SERVER_URL #

在Vue组件或API封装里，直接使用环境变量调用后端：

• Vue CLI 2：process.env.SERVER_URL
• Vue CLI 3+：process.env.VUE_APP_SERVER_URL

6. 部署时匹配对应环境 #

在AWS的每个环境部署时，执行对应的构建命令：

• 开发环境：npm run build:dev
• 测试环境：npm run build:test
• 预发布环境：npm run build:staging
• 生产环境：npm run build:prod
  打包后的dist文件会自动携带对应环境的SERVER_URL配置，直接部署即可。

额外提示：Grails端配合（可选） #

如果Grails后端需要跨域或其他环境相关配置，可以在application.yml中通过环境分支配置对应域名，确保前后端配置匹配。

内容的提问来源于stack exchange，提问作者M.Dav