欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作

 更新時間:2020年11月06日 16:05:26   作者:人間草木96  
這篇文章主要介紹了nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

需要npm axios?

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

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

以上是百度到的,發(fā)現(xiàn)老是報錯,現(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, // 表示開啟代理
  prefix: '/api', // 表示給請求url加個前綴 /api
  credentials: true // 表示跨域請求時是否需要使用憑證
 },
 
 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?name=盜墓筆記`).then(res => {
    console.log(res)
   })
  }
 }
 
}
</script>
<style scoped>
</style>

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

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

每次打測試包或者線上包,我都得手動切換域名,我相信很多人的做法跟這差不多,類似下面這樣:

(你已經(jīng)注意到,這個文件已經(jīng)被我無情的刪除了,因為我發(fā)現(xiàn)了屬于我自己的新大陸)

每次打包都要切換注釋,雖然也能接受,但是容易忘記或者出錯,或者找這個配置文件都要找半天,

對于我這種反應(yīng)遲鈍、頭腦經(jīng)常性短路的人來說實在太痛苦了,

有痛點,那就要尋求解決方法:

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

npm i cross-env -D

第二步:配置BASE_URL和NODE_ENV

我們不是有個package.json嗎,里面是不是有個scripts對象?

// 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"
 },
}

先寫cross-env,接著配置BASE_URL和NODE_ENV,

因為cross-env能跨平臺地設(shè)置及使用環(huán)境變量,這樣我們在執(zhí)行不同的命令(npm run xxx)時,都會設(shè)置相應(yīng)的BASE_URL(基本域名)和NODE_ENV(環(huán)境變量)

一定要注意,命令一定要寫在末尾,比如我上面的nuxt、nuxt start、nuxt build等等,否則 npm run 時會報錯

執(zhí)行不同的命令就會自動設(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

千萬別直接復(fù)制我上面的這段代碼哦,因為每個項目的BASE_URL一般都是不一樣的,你要換成自己項目的接口請求域名

第三步:配置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
 }
}

第四步:如何使用

使用是最簡單的,直接寫process.env.BASE_URL就可以了,比如在我們的axios配置文件里使用process.env.BASE_URL

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

從此以后,只需要執(zhí)行不同的打包命令就可以自動設(shè)置BASE_URL和NODE_ENV了,告別頻繁的注釋和取消注釋,瀟灑的刪除你的if...else...設(shè)置baseUrl的文件吧!

以上這篇nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動

    Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動

    這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過屏幕時會出現(xiàn)滾動條,按鈕和標(biāo)題都會隨著滾動,用戶體驗不好,需要的朋友可以參考下
    2024-05-05
  • Vue項目中keepAlive的使用說明(超級實用版)

    Vue項目中keepAlive的使用說明(超級實用版)

    這篇文章主要介紹了Vue項目中keepAlive的使用說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue對象添加屬性(key:value)、顯示和刪除屬性方式

    vue對象添加屬性(key:value)、顯示和刪除屬性方式

    這篇文章主要介紹了vue對象添加屬性(key:value)、顯示和刪除屬性方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 基于Vue3+Element Plus 實現(xiàn)多表單校驗demo

    基于Vue3+Element Plus 實現(xiàn)多表單校驗demo

    表單校驗在日常的開發(fā)需求中是一種很常見的需求,通常在提交表單發(fā)起請求前校驗用戶輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗,本文給大家介紹基于Vue3+Element Plus 實現(xiàn)多表單校驗demo,感興趣的朋友一起看看吧
    2024-06-06
  • vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)

    vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)

    這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗方式(最大值-最小值),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue3中無法為el-tree-select設(shè)置反選問題解析

    Vue3中無法為el-tree-select設(shè)置反選問題解析

    這篇文章主要介紹了Vue3中無法為el-tree-select設(shè)置反選問題分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 淺談在Vue.js中如何實現(xiàn)時間轉(zhuǎn)換指令

    淺談在Vue.js中如何實現(xiàn)時間轉(zhuǎn)換指令

    這篇文章主要介紹了淺談在Vue.js中如何實現(xiàn)時間轉(zhuǎn)換指令,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue 自定義提示框(Toast)組件的實現(xiàn)代碼

    vue 自定義提示框(Toast)組件的實現(xiàn)代碼

    這篇文章主要介紹了vue 自定義提示框(Toast)組件的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue項目中使用this.$confirm解析

    vue項目中使用this.$confirm解析

    這篇文章主要介紹了vue項目中使用this.$confirm方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vite+vue3搭建的工程實現(xiàn)批量導(dǎo)入store的module

    vite+vue3搭建的工程實現(xiàn)批量導(dǎo)入store的module

    這篇文章主要介紹了vite+vue3搭建的工程實現(xiàn)批量導(dǎo)入store的module方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論