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]
阅读 1k
0 声望
0 粉丝
0 条评论
0 声望
0 粉丝
文章目录
宣传栏