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

A_Ghost

之前介绍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

阅读 3k

知道的越多,不知道的也就越多。

26 声望
0 粉丝
0 条评论
推荐阅读
DOM树问题
在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。问题重现:HTML代码:

A_Ghost阅读 604

还在用定时器吗?借助 CSS 来监听事件
平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信...

XboxYan29阅读 2k评论 2

封面图
如何优雅地中断 Promise?来试试 AbortController 吧!
欢迎大家来到 前端小课堂 的第五期,今天我们来聊一聊如何终止正在进行中的 Fetch 以及 Promise。文中会跟大家详细介绍这里面的两个关键知识点 AbortController 和 AbortSignal。对动手实践比较感兴趣的同学还可...

dreamapplehappy23阅读 2.8k评论 4

封面图
前端性能优化(图文并茂,通俗易懂)
默认情况下,我们静态导入的所有模块都会添加到初始捆绑包中。使用默认 ES2015 导入语法 导入的模块将静态导入。import module from 'module'

寒水寺一禅26阅读 2.8k评论 1

超强的苹果官网滚动文字特效实现
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外。最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣,看适用简单却...

chokcoco24阅读 1.6k

封面图
50天用vue3完成了50个web项目,我学到了什么?
通过本文的50个web示例你将学到:Vue3核心基础语法和进阶语法less核心基础语法和进阶语法scss核心基础语法和进阶语法1.Expanding Cards效果如图所示:源码在线示例学到了什么?JavascriptVue ref方法定义基本响应式...

夕水21阅读 2k

封面图
一个被忽略的前端细分领域
大家好,我卡颂。回想下你学新技术的主要途径是什么?看书?看技术文档?看博文?看视频?归纳起来,无外乎文字、视频两种形式。从纸媒时代到互联网时代,再到移动互联网时代,虽然信息的载体发生变化,但信息的...

卡颂18阅读 1.4k

封面图

知道的越多,不知道的也就越多。

26 声望
4 粉丝
宣传栏