Nuxt.js配置环境变量

一、客户端

1、安装 cross-env 依赖

npm i cross-env -D

2、创建 .env 和 .env.development 环境文件

.env 内容如下：

BASE_URL=http://localhost:3000/api

.env.development 内容如下：

BASE_URL=http://localhost:4000/api

3、修改 package.json 启动脚本（两端全配）

{
  "scripts": {
    "dev": "cross-env MODE=development nuxt -e development"
  }
}

4、nuxt.config.js 配置修改

const envConfig = require('dotenv').config({
  path: `.env${process.env.MODE ? `.${process.env.MODE}` : ''}`
});

export default {
  server: {
    port: 4000
  },
  env: {
    ...process.env,
    ...envConfig.parsed
  },
  // ...
}

注意：dotenv是集成好的，不用单独安装

5、在 axios 中使用

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.BASE_URL,
  timeout: 60000,
});

二、服务端

1、安装 commander 依赖

npm i commander -S

package.json 修改同上

2、在入口文件（index.js 或 app.js）绑定到全局

// 绑定全局变量
const { Command } = require('commander');
const program = new Command();
program.version('1.0.0');
program
  .option('-e, --env <env>', 'environment - e.g. test development production')
  .option('-p, --port <port>', 'port - e.g. 3000');
program.parse();
global.env = program.opts().env;

3、创建配置文件

├─ config  
    ├─ development.js
    ├─ index.js
    └─ production.js
├─ index.js 

development.js 内容如下：

module.exports = {
  BASE_URL: '/api'
}

production.js 内容如下：

module.exports = {
  BASE_URL: '/'
}

index.js 内容如下：

const { defaultsDeep } = require("lodash");

const defaultConfig = {
  SITE_NAME: "测试",
};

const envConfig = require("./" + global.env + ".js");

module.exports = defaultsDeep(defaultConfig, envConfig);

4、使用

const config = require('../config');

console.log(config.BASE_URL);