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

November 3, 2021 · 1 min · jiezi

Table of Contents

前言

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