nuxt - 环境变量配置

1. 安装cross-env插件

npm install cross-env --save

2. 配置env.js

新建一个env.js文件放在目录下（与nuxt.config.js同级），在里面写入自己的项目需要配置的几种环境以及对应环境的参数的值。
比如我的项目的环境有三种，分别是开发环境、测试环境和生成环境，里面对应的BASE_API就是不同环境下的服务器地址。同样的，如果三个环境的登录地址啊或者其他有不一样的，都能按照BASE_API这样的写法进行配置。

module.exports = {
  // 开发环境
  dev: {
    NODE_ENV: 'development',
    BASE_API: '' // 开发服务器地址
  },
  // 测试环境
  test: {
    NODE_ENV: 'test',
    BASE_API: '' // 测试服务器地址
  },
  // 生产环境
  pro: {
    NODE_ENV: 'production',
    BASE_API: '' // 正式服务器地址
  }
}

3. 配置nuxt.config.js

首先头部要引入先前我们配置的env.js

import env from './env' // 环境配置文件

然后修改env属性

export default {
  env: {
    baseUrl: env[process.env.NODE_ENV].BASE_API,
    NODE_ENV: env[process.env.NODE_ENV].NODE_ENV
  }
}

4. 修改package.json文件的scripts属性

原本的scripts属性

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lint": "npm run lint:js"
}

修改之后的scripts属性

"scripts": {
  "dev": "cross-env NODE_ENV=dev nuxt",
  "test": "cross-env NODE_ENV=test nuxt",
  "build": "cross-env NODE_ENV=pro nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lint": "npm run lint:js"
}

现在我们在命令行里输入npm run test，看看它跑的是什么环境。
通过process.env.NODE_ENV变量可以看到我们这边跑的环境是test环境。

npm run test结果

这一节就此结束了，下一节就来看看axios吧~