之前介绍了nuxt的基本使用，现在需要结合后端使用，为了方便使用，对接口进行了封装。一、axios1，安装npminstall@nuxtjs/axios2，配置axios//nuxt.config.jsmodules:['@nuxtjs/axios','@nuxt/content'],axios:{baseURL:process.env.BASE_URL,},3、封装接口导出默认函数({app,$axios},inject){constAPI={};//这个是我自己写的，会出现Maximumcallstacksizeexceeded的问题。//API.getGameList=function(){//返回$axios({//url:'/apps.json',//方法:'get',//})//};API.getGameList=function(){return$axios.$get('/apps.json')};//使用inject后，可以通过this调用接口。$api.getGameListapp.api=API;inject('api',API);}4.1、asyncData调用接口asyncasyncData(context){constapiGame=awaitcontext.app.api.getGameList();awaitconsole.log('GetInterface',process.env.BASE_URL,apiGame)return{apiGame}},4.2,methods中使用方法：{asynchandleGame(){console.log('$api---',this.$api)consttempGame=awaitthis.$api.getGameList();console.log('tempGame',tempGame)}}二、在package.json文件中配置环境变量nuxt环境变量1、安装cross-envnpmicross-env-D2，修改包中的脚本"scripts".json文件：{"dev":"cross-envBASE_URL=http://192.168.XXX.XXX:8080NODE_ENV=developmentnuxt","build":"nuxtbuild","start":"nuxtstart",“生成”：“nuxt生成”，“发布”：“nuxt生成”，“lint：js”："eslint--ext\".js,.vue\"--ignore-path.gitignore.","lint":"yarnlint:js"},3、在nuxt.config.js中添加配置env:{BASE_URL:process.env.BASE_URL,NODE_ENV:process.env.NODE_ENV},配置完成后需要重启服务获取BASE_URL
