目录1、前言2、场景3、创建环境3.1 注入环境变量4、最后1、前言 一般在我们项目开发中，一般会有以下3个环境 开发环境也叫测试环境(test) RC环境也叫预发
那么有一种情况是我们需要在不同环境下区分不同的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",
打开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 多环境变量配置的文章就介绍到这了,更多相关nuxt.js 多环境变量配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: nuxt.js 多环境变量配置
本文链接: https://www.lsjlt.com/news/156318.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0