Nuxt环境变量的配置，教你轻松搞定在不同的环境下变量的配置

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

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

第一步：新建env.js文件

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

module.exports = {
  dev: {
    MODE: 'development',
    ENV_API: 'http://xxx/api/'   //测试服务器地址
  },
  pro: {
    MODE: 'production',
    ENV_API: 'https://xxx/api/'  // 正式服务器地址
  }
}

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

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

const env = require('./env')

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

proxy: {
  '/api': {
        target: env[process.env.MODE].ENV_API,
        pathRewrite: {
          '^/api/': ''
        }
      }
}

上面这段代码，也是接口代理的配置，target是接口地址，pathRewrite是一个重写规则。

第三步：配置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=dev nuxt generate",
    "generate": "cross-env MODE=pro nuxt generate"
},

至此，环境变量就配置完了，我们可以根据不同的环境，执行不同的命令。调用不同的接口，不用每次注释代码了。
更多前端相关的文章，大家可以搜索微信公众号：“刘小妞的栖息地”或者识别下图的二维码查看，感谢大家的支持。