nuxt.js渲染axios和proxy代理

nuxt.js渲染axios和proxy代理？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

需要npm axios？

剛開(kāi)始，我以為需要像普通的vue SPA開(kāi)發(fā)那樣，需要npm axios，這種方式的確可以生效。但在使用時(shí)并不方便。尤其是設(shè)置代理比較麻煩，而且在asyncData里與在普通methods里使用方式不一樣。

后來(lái)在nuxt的github上發(fā)現(xiàn)了nuxt是默認(rèn)集成了axios的，所以不需要npm axios，但是需要進(jìn)行適當(dāng)?shù)呐渲谩?/p>

以上是百度到的，發(fā)現(xiàn)老是報(bào)錯(cuò)，現(xiàn)在網(wǎng)上的教程完全是在扯淡，npm axios 是不需要安裝了，但是 @nuxtjs/axios 要安裝啊

第一步：

npm 安裝@nuxtjs/axios，文件根目錄下安裝，指令如下

npm install @nuxtjs/axios

第二步：

在 nuxt.config.js 文件中 配置 axios 和 proxy 代理 如下圖：

方便你復(fù)制~~~~

import pkg from './package' 
export default {
 mode: 'universal',
 
 /*
 ** Headers of the page
 */
 head: {
  title: pkg.name,
  meta: [
   { charset: 'utf-8' },
   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   { hid: 'description', name: 'description', content: pkg.description }
  ],
  link: [
   { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
 },
 
 /*
 ** Customize the progress-bar color
 */
 loading: { color: '#fff' },
 
 /*
 ** Global CSS
 */
 css: [
  'iview/dist/styles/iview.css'
 ],
 
 /*
 ** Plugins to load before mounting the App
 */
 plugins: [
  '@/plugins/iview'
 ],
 
 /*
 ** Nuxt.js modules
 */
 modules: [
  '@nuxtjs/axios'
 ],
 
 axios: {
  proxy: true, // 表示開(kāi)啟代理
  prefix: '/api', // 表示給請(qǐng)求url加個(gè)前綴 /api
  credentials: true // 表示跨域請(qǐng)求時(shí)是否需要使用憑證
 },
 
 proxy: {
  '/api': { 
   target: 'https://www.apiopen.top', // 目標(biāo)接口域名
   pathRewrite: {
    '^/api': '/', // 把 /api 替換成 /
    changeOrigin: true // 表示是否跨域
   }  
  }
 },
 
 /*
 ** Build configuration
 */
 build: {
  /*
  ** You can extend webpack config here
  */
  extend(config, ctx) {
  },
  vendor: ['axios'] // 為防止重復(fù)打包
 }
}

第三步：

在組件中使用

<template>
 <div>my</div>
</template>
<script>
export default {
 created () {
  this.allList()
 },
 methods: {
  allList () {
   this.$axios.post(`/novelSearchApi&#63;name=盜墓筆記`).then(res => {
    console.log(res)
   })
  }
 }
 
}
</script>
<style scoped>
</style>

補(bǔ)充知識(shí)：nuxt.js配置BASE_URL（基本域名）和NODE_ENV（環(huán)境變量）

一直以來(lái)，開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的數(shù)據(jù)接口域名不一樣總是困擾著我

每次打測(cè)試包或者線上包，我都得手動(dòng)切換域名，我相信很多人的做法跟這差不多，類(lèi)似下面這樣：

（你已經(jīng)注意到，這個(gè)文件已經(jīng)被我無(wú)情的刪除了，因?yàn)槲野l(fā)現(xiàn)了屬于我自己的新大陸）

每次打包都要切換注釋?zhuān)m然也能接受，但是容易忘記或者出錯(cuò)，或者找這個(gè)配置文件都要找半天，

對(duì)于我這種反應(yīng)遲鈍、頭腦經(jīng)常性短路的人來(lái)說(shuō)實(shí)在太痛苦了，

有痛點(diǎn)，那就要尋求解決方法：

第一步：安裝 cross-env（這個(gè)迷你的包能夠提供一個(gè)設(shè)置環(huán)境變量的scripts）

npm i cross-env -D

第二步：配置BASE_URL和NODE_ENV

我們不是有個(gè)package.json嗎，里面是不是有個(gè)scripts對(duì)象？

// package.json
{
 "scripts": {
  "dev": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=development nuxt",
  "start": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=production nuxt start",
  "build": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt build",
  "test": "cross-env BASE_URL=https://test.17wawawa.com NODE_ENV=production nuxt generate",
  "generate": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt generate"
 },
}

先寫(xiě)cross-env，接著配置BASE_URL和NODE_ENV，

因?yàn)閏ross-env能跨平臺(tái)地設(shè)置及使用環(huán)境變量，這樣我們?cè)趫?zhí)行不同的命令（npm run xxx）時(shí)，都會(huì)設(shè)置相應(yīng)的BASE_URL（基本域名）和NODE_ENV（環(huán)境變量）

一定要注意，命令一定要寫(xiě)在末尾，比如我上面的nuxt、nuxt start、nuxt build等等，否則 npm run 時(shí)會(huì)報(bào)錯(cuò)

執(zhí)行不同的命令就會(huì)自動(dòng)設(shè)置不同的BASE_URL和NODE_ENV

npm run dev // BASE_URL=https://devpc.17wawawa.com NODE_ENV=development

npm run test // BASE_URL=https://test.17wawawa.com NODE_ENV=production

npm run generate // BASE_URL=https://www.17wawawa.com NODE_ENV=production

千萬(wàn)別直接復(fù)制我上面的這段代碼哦，因?yàn)槊總€(gè)項(xiàng)目的BASE_URL一般都是不一樣的，你要換成自己項(xiàng)目的接口請(qǐng)求域名

第三步：配置nuxt.config.js

package.json中的scripts配置完成之后，還要去nuxt.config.js配置一下env，官方文檔

// nuxt.config.js
module.exports = {
 mode: 'universal',
 env: {
  BASE_URL: process.env.BASE_URL,
  NODE_ENV: process.env.NODE_ENV
 }
}

第四步：如何使用

使用是最簡(jiǎn)單的，直接寫(xiě)process.env.BASE_URL就可以了，比如在我們的axios配置文件里使用process.env.BASE_URL

或者你在任意頁(yè)面console.log(process.env.BASE_URL)都是可以打印得出來(lái)的

從此以后，只需要執(zhí)行不同的打包命令就可以自動(dòng)設(shè)置BASE_URL和NODE_ENV了，告別頻繁的注釋和取消注釋?zhuān)瑸t灑的刪除你的if...else...設(shè)置baseUrl的文件吧！

關(guān)于nuxt.js渲染axios和proxy代理問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。