nuxt.js 多环境变量配置
林间有风 -前言
一般在我们项目开发中,一般会有以下3个环境
开发环境也叫测试环境(test)RC环境也叫预发布环境(rc)线上环境(production)最近花了500块钱 搞了个配置较高 阿里服务器 来学习 node 及对应的框架,现在:,阿里云双11活动 1核2G1M,69元/1年,180元/3年
场景那么有一种情况是我们需要在不同环境下区分不同的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]
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
下一篇: 前端面试每日 3+1 —— 第937天