nuxt---axios封装+环境变量配置

之前介绍nuxt 的基本用法，现在需要与后端联调，为了方便使用，于是进行接口的封装。

一，axios

1，安装
npm install @nuxtjs/axios
2，配置axios

// nuxt.config.js
modules: [
  '@nuxtjs/axios',
  '@nuxt/content'
],
axios: {
  baseURL: process.env.BASE_URL,
},

3，封装接口

export default function ({ app, $axios},inject) {

  const API = {};
  // 我自己这么写，会出现 Maximum call stack size exceeded 的问题。
  // API.getGameList = function () {
  //   return $axios({
  //     url: '/apps.json',
  //     method: 'get',
  //   })
  // };
  API.getGameList = function () {
    return $axios.$get('/apps.json')
  };
  // 使用 inject 之后，可以通过 this.$api.getGameList 调用接口
  app.api = API;
  inject('api',API);

}

4.1，asyncData 调用接口

async asyncData(context) {
  const apiGame = await context.app.api.getGameList();
  await console.log('获取接口', process.env.BASE_URL, apiGame)
  return { apiGame }
},

4.2，methods 里使用

methods: {
  async handleGame(){
    console.log('$api---',this.$api)
    const tempGame = await this.$api.getGameList();
    console.log('tempGame',tempGame)
  }
}

二，环境变量

nuxt 的环境变量是配在 package.json 文件里的
1，安装cross-env
npm i cross-env -D
2，修改 package.json 文件中的 scripts

 "scripts": {
    "dev": "cross-env BASE_URL=http://192.168.XXX.XXX:8080 NODE_ENV=development nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "release": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },

3，在nuxt.config.js 添加配置

env: {
  BASE_URL: process.env.BASE_URL,
  NODE_ENV: process.env.NODE_ENV
},

配置完成之后，需要重启一下服务，才能获取到 BASE_URL