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