关于vue.js:nuxtjs-多环境变量配置

前言

个别在咱们我的项目开发中，个别会有以下 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]