本文介绍如何在 Nuxt.js 项目中配置开发、预发布及线上多环境。通过创建 env.js 定义 MODE，在 package.json 中配置 cross-env 构建命令，并在 nuxt.config.js 中注入环境变量。最终在页面代码中根据环境动态获取对应 API 接口地址，实现不同环境下接口的灵活切换。
前言
在常规项目开发流程中，通常涉及三种不同的运行环境。
- 开发环境，即测试环境（
test）。 RC环境，即预发布环境（rc）。- 线上环境（
production）。
应用场景
在实际开发中，常需根据不同环境区分调用不同的api接口，具体示例如下。
- 测试环境
(test) api=test.ydhtml.com
- 预发布环境（
rc) api=rc.ydhtml.com
- 线上环境
(production) api=ydhtml.com
环境配置创建
接下来，在项目的根目录下创建 env.js 文件，其内容如下所示。
module.exports = {
test: {
MODE: 'test'
},
rc: {
MODE: 'rc',
},
prod: {
MODE: 'prod',
}
}
完成对应环境的配置后，需在 package.json 文件中的 scripts字段内增加相应的打包命令。
具体配置如下：
"build:test": "cross-env MODE=test nuxt build",
"build:rc": "cross-env MODE=rc nuxt build",
"build:prod": "cross-env MODE=prod nuxt build",
3.1 配置环境变量注入
打开nuxt.config.js 文件，并在其中添加以下代码以注入环境变量。
const env = require('./env')
module.exports = {
env: {
NUXT_ENV: env[process.env.MODE]
}
}
总结
最后，在页面代码中通过以下方式调用环境变量。
const api = {
prod: 'http://ydhtml.com',
test: 'http://test-ydhtml.com',
rc: 'http://rc-ydhtml.com'
}
const baseURL = api[process.env.NUXT_ENV.MODE]
至此，关于 Nuxt.js 多环境变量配置的教程已结束。如需了解更多相关内容，可搜索本站往期文章或继续浏览后续文章，感谢大家的支持！