詳解如何在nuxt中添加proxyTable代理
背景
在本地開發(fā)vue項(xiàng)目的時(shí)候,當(dāng)你習(xí)慣了proxyTable解決本地跨域的問題,切換到nuxt的時(shí)候,你會(huì)發(fā)現(xiàn),添加了proxyTable設(shè)置并沒有什么作用,那是因?yàn)槟闶怯玫膙ue腳手架生成的vue項(xiàng)目,它里面已經(jīng)幫你寫好了相關(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)行就可以了。
覺得運(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)求問題【推薦】
- vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
- 詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(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 解決開發(fā)環(huán)境的跨域問題詳解
相關(guān)文章
2種在vue項(xiàng)目中使用百度地圖的簡(jiǎn)單方法
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡(jiǎn)單的方法,非常實(shí)用,一起來(lái)學(xué)習(xí)下。2018-09-09
Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動(dòng)效果
這篇文章主要介紹了Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例
這篇文章主要為大家介紹了Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問題
這篇文章主要介紹了解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue.js?前端項(xiàng)目在常見?Web?服務(wù)器上的部署配置過(guò)程
Web服務(wù)器支持多種編程語(yǔ)言,如 PHP,JavaScript,Ruby,Python 等,并且支持動(dòng)態(tài)生成 Web 頁(yè)面,這篇文章主要介紹了Vue.js?前端項(xiàng)目在常見?Web?服務(wù)器上的部署配置,需要的朋友可以參考下2023-02-02

