nuxt.js服務端渲染中axios和proxy代理的配置操作
需要npm axios？
剛開始，我以為需要像普通的vue SPA開發(fā)那樣，需要npm axios，這種方式的確可以生效。但在使用時并不方便。尤其是設置代理比較麻煩，而且在asyncData里與在普通methods里使用方式不一樣。
后來在nuxt的github上發(fā)現(xiàn)了nuxt是默認集成了axios的，所以不需要npm axios，但是需要進行適當?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 代理 如下圖：
方便你復制~~~~
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', // 目標接口域名
pathRewrite: {
'^/api': '/', // 把 /api 替換成 /
changeOrigin: true // 表示是否跨域
}
}
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
},
vendor: ['axios'] // 為防止重復打包
}
}
第三步：
在組件中使用
<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>
補充知識：nuxt.js配置BASE_URL（基本域名）和NODE_ENV（環(huán)境變量）
一直以來，開發(fā)環(huán)境和生產(chǎn)環(huán)境的數(shù)據(jù)接口域名不一樣總是困擾著我
每次打測試包或者線上包，我都得手動切換域名，我相信很多人的做法跟這差不多，類似下面這樣：
（你已經(jīng)注意到，這個文件已經(jīng)被我無情的刪除了，因為我發(fā)現(xiàn)了屬于我自己的新大陸）
每次打包都要切換注釋，雖然也能接受，但是容易忘記或者出錯，或者找這個配置文件都要找半天，
對于我這種反應遲鈍、頭腦經(jīng)常性短路的人來說實在太痛苦了，
有痛點，那就要尋求解決方法：
第一步：安裝 cross-env（這個迷你的包能夠提供一個設置環(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能跨平臺地設置及使用環(huán)境變量，這樣我們在執(zhí)行不同的命令（npm run xxx）時，都會設置相應的BASE_URL（基本域名）和NODE_ENV（環(huán)境變量）
一定要注意，命令一定要寫在末尾，比如我上面的nuxt、nuxt start、nuxt build等等，否則 npm run 時會報錯
執(zhí)行不同的命令就會自動設置不同的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
千萬別直接復制我上面的這段代碼哦，因為每個項目的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í)行不同的打包命令就可以自動設置BASE_URL和NODE_ENV了，告別頻繁的注釋和取消注釋，瀟灑的刪除你的if...else...設置baseUrl的文件吧！
以上這篇nuxt.js服務端渲染中axios和proxy代理的配置操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue內聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時,可以通過內聯(lián)事件處理器來直接在模板中編寫事件處理邏輯,內聯(lián)事件處理器不僅可以直接執(zhí)行簡單的操作,還可以調用組件中的方法,并訪問事件參數(shù),下面將詳細講解如何在內聯(lián)事件處理器中調用方法以及訪問事件參數(shù),需要的朋友可以參考下2024-12-12
基于vue.js輪播組件vue-awesome-swiper實現(xiàn)輪播圖
一般做移動端輪播圖的時候，最常用的就是Swiper插件了，而vue.js也有一個輪播組件vue-awesome-swiper，用法跟swiper相似。接下來通過本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實現(xiàn)輪播圖實例代碼，需要的朋友參考下2017-03-03
這篇文章主要為大家詳細介紹了如何利用Vue制作出卡片無限滾動動畫，文中的示例代碼講解詳細，對我們學習有一定幫助，需要的可以參考一下2022-05-05
這篇文章主要介紹了TinyMCE富文本編輯器在Vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解
這篇文章主要介紹了Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下2018-01-01
el-input輸入校驗不能為空格以及不能輸入全部為空的內容
這篇文章主要給大家介紹了關于el-input輸入校驗不能為空格以及不能輸入全部為空的內容的相關資料,el-input驗證規(guī)則主要是為了確保輸入的內容符合特定的要求,需要的朋友可以參考下2023-10-10
elementUI使用el-upload上傳文件寫法及避坑總結(上傳圖片/視頻到本地/服務器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個功能,下面這篇文章主要給大家介紹了關于elementUI使用el-upload上傳文件寫法及避坑的相關資料,包括上傳圖片/視頻到本地/服務器及回顯+刪除,需要的朋友可以參考下2023-03-03
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于vuex模塊獲取數(shù)據(jù)及方法的相關資料,需要的朋友可以參考下2023-03-03
vue計算屬性computed、事件、監(jiān)聽器watch的使用講解
今天小編就為大家分享一篇關于vue計算屬性computed、事件、監(jiān)聽器watch的使用講解，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue項目tween方法實現(xiàn)返回頂部,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03