NUXT环境变量的配置

我们在开发的时候，往往会有不同的开发环境，比如本地环境、测试环境、线上环境等等，有时候会根据环境的不同，需要不同的配置，最常用的就是接口地址的配置。

我们经常会在配置接口地址的地方写多个接口地址，在不同的环境下，采用注释的方法来切换。其实，在Nuxt里可以通过配置环境变量来使程序自动判断采用哪个接口地址。

第一步：新建env.js文件

在项目的根目录下，新建env.js文件。内容如下：

export default {
  dev: {
    MODE: 'dev',
    baseUrl: 'https://atopdev.aciga.com.cn'
  },
  test: {
    MODE: 'test',
    baseUrl: 'https://atoptest.aciga.com.cn'
  },
  pro: {
    MODE: 'pro',
    baseUrl: 'https://aiot.aciga.com.cn'
  }
}

第二步：配置nuxt.config.js文件

在nuxt.config.js文件顶部引入env，代码如下：

import env from './env';

在配置接口的地方，改成环境变量，代码如下：

export default {
  env: {
    ...env[process.env.MODE]
  },

第三步：配置package.js文件

"scripts": {
    "dev": "cross-env MODE=dev nuxt",
    "pro": "cross-env MODE=pro nuxt",
    "builddev": "cross-env MODE=dev nuxt build",
    "build": "cross-env MODE=pro nuxt build",
    "test": "cross-env MODE=test nuxt generate",
    "generate": "cross-env MODE=pro nuxt generate"
},

至此，环境变量就配置完了，我们可以根据不同的环境，执行不同的命令。调用不同的接口，不用每次注释代码了。