詳解如何在nuxt中添加proxyTable代理
背景
在本地開(kāi)發(fā)vue項(xiàng)目的時(shí)候,當(dāng)你習(xí)慣了proxyTable解決本地跨域的問(wèn)題,切換到nuxt的時(shí)候,你會(huì)發(fā)現(xiàn),添加了proxyTable設(shè)置并沒(méi)有什么作用,那是因?yàn)槟闶怯玫膙ue腳手架生成的vue項(xiàng)目,它里面已經(jīng)幫你寫(xiě)好了相關(guān)的proxyTable的設(shè)置代碼。
build/dev-server.js
// proxy api requests Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) })
這里是采用的express中間件的形式,使用的依賴是http-proxy-middleware
nuxt也有中間件的概念,不過(guò)這個(gè)中間件不是express的中間件,那么我們?cè)趺刺砑拥絥uxt里面去呢?
怎么做
首先,安裝依賴
npm install --save-dev express http-proxy-middleware
然后在根目錄創(chuàng)建一個(gè)文件server.js
const { Nuxt, Builder } = require('nuxt') const app = require('express')() var proxyMiddleware = require('http-proxy-middleware') var config = require('./nuxt.config') // 我們用這些選項(xiàng)初始化 Nuxt.js: const isProd = process.env.NODE_ENV === 'production' const nuxt = new Nuxt({ dev: !isProd }) // 生產(chǎn)模式不需要 build if (!isProd) { const builder = new Builder(nuxt) builder.build() } // proxy api requests這里就是添加的proxyTable中間價(jià)的設(shè)置了 var proxyTable = config.dev.proxyTable Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) }) app.use(nuxt.render)//這里是添加nuxt渲染層服務(wù)的中間件 app.listen(3000) console.log('Server is listening on http://localhost:3000')
然后在nuxt.config.js中添加如下代碼
module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:7001', // pathRewrite: { '^/api': '/' } } } } }
然后node server.js運(yùn)行就可以了。
覺(jué)得運(yùn)行不方便還可以把命令添加到package.json文件里。
{ "scripts": { "dev": "nuxt --port=8080", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint", "server": "node server.js" } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- webpack+vue-cil中proxyTable處理跨域的方法
- 詳解webpack的proxyTable無(wú)效的解決方案
- 使用proxytable 配置解決 vue-cli 的跨域請(qǐng)求問(wèn)題【推薦】
- vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
- 詳解vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)
- vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請(qǐng)求的方法
- vue proxyTable 接口跨域請(qǐng)求調(diào)試的示例
- 詳解Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求
- Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解
相關(guān)文章
2種在vue項(xiàng)目中使用百度地圖的簡(jiǎn)單方法
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡(jiǎn)單的方法,非常實(shí)用,一起來(lái)學(xué)習(xí)下。2018-09-09Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動(dòng)效果
這篇文章主要介紹了Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例
這篇文章主要為大家介紹了Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue.js?前端項(xiàng)目在常見(jiàn)?Web?服務(wù)器上的部署配置過(guò)程
Web服務(wù)器支持多種編程語(yǔ)言,如 PHP,JavaScript,Ruby,Python 等,并且支持動(dòng)態(tài)生成 Web 頁(yè)面,這篇文章主要介紹了Vue.js?前端項(xiàng)目在常見(jiàn)?Web?服務(wù)器上的部署配置,需要的朋友可以參考下2023-02-02