模板創(chuàng)建好了，現(xiàn)在就要看看能不能在這個(gè)模板里獲取到接口數(shù)據(jù)了，在這個(gè)nuxt+express模板中就已經(jīng)下載好了axios，所以我們不用再下載了，由于我們只是測(cè)試一下能不能用這個(gè)調(diào)用接口，所以這里我并沒有封裝axios，封裝axios后面有空的話再來。。

在首頁(yè)的vue文件里面來調(diào)用接口，代碼如下：

import axios from '~/plugins/axios'? ?// 引用axios

asyncData({ req, params }) {

? ? return axios.get('http://192.168.5.93:5004/api/home/newbie_guide')

? ? ? .then((res) => {

? ? ? ? console.log('res', res)

? ? ? })

? }

http://192.168.5.93:5004/api/home/newbie_guide這個(gè)接口是有數(shù)據(jù)的如圖：

但是，控制臺(tái)上卻報(bào)錯(cuò)：

百度了一下是跨域問題。。像我們之前的vue項(xiàng)目可以在config/index.js,在proxyTable中添加api地址可代理解決:

proxyTable: {?

??'/api': {??

????target: ' http://192.168.5.93:5004 ',

??}?

}

在nuxt項(xiàng)目中同樣需要修改nuxt.config.js配置文件。

首先，需要下載代理插件@nuxtjs/axios：

npm install @nuxtjs/axios --save

然后在nuxt.config.js文件里面添加以下代碼：

module.exports={

????modules: [

? ? ????'@nuxtjs/axios'

????? ],

? ????axios: {

? ? ????proxy: true

? ????},

? ????proxy: {

? ????? '/api': 'http://192.168.5.93:5004'

? ????}

}

這樣，就可以啦~