|
1、前言一般在我们项目开发中，一般会有以下3个环境 - 开发环境也叫测试环境(
test) RC环境也叫预发布环境(rc)- 线上环境(
production)
2、场景那么有一种情况是我们需要在不同环境下区分不同的api接口例如 - 测试环境
(test) api=test.ydhtml.com
- 预发布环境(
rc) api=rc.ydhtml.com
- 线上环境
(production) api=ydhtml.com
3、创建环境接下来我们在项目的根目录中创建 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] }}
4、最后最后我们在页面里面使用，代码如下： 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 多环境变量配置内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
vue中PC端地址跳转移动端的操作方法
Vue使用Canvas生成随机大小且不重叠圆 |
