詳解如何在nuxt中添加proxyTable代理
背景
在本地開發(fā)vue項目的時候,當(dāng)你習(xí)慣了proxyTable解決本地跨域的問題,切換到nuxt的時候,你會發(fā)現(xiàn),添加了proxyTable設(shè)置并沒有什么作用,那是因為你是用的vue腳手架生成的vue項目,它里面已經(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也有中間件的概念,不過這個中間件不是express的中間件,那么我們怎么添加到nuxt里面去呢?
怎么做
首先,安裝依賴
npm install --save-dev express http-proxy-middleware
然后在根目錄創(chuàng)建一個文件server.js
const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
var proxyMiddleware = require('http-proxy-middleware')
var config = require('./nuxt.config')
// 我們用這些選項初始化 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中間價的設(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"
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- webpack+vue-cil中proxyTable處理跨域的方法
- 詳解webpack的proxyTable無效的解決方案
- 使用proxytable 配置解決 vue-cli 的跨域請求問題【推薦】
- vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
- 詳解vue-cli項目中的proxyTable跨域問題小結(jié)
- vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求的方法
- vue proxyTable 接口跨域請求調(diào)試的示例
- 詳解Vuejs2.0 如何利用proxyTable實現(xiàn)跨域請求
- Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解
相關(guān)文章
vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼
本篇文章主要介紹了vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
vue?el-input設(shè)置必填提示功能(單個與多個)
有的功能需要設(shè)置必填項,當(dāng)然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個與多個)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能
這篇文章主要介紹了Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉(zhuǎn)了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
如何用VUE和Canvas實現(xiàn)雷霆戰(zhàn)機(jī)打字類小游戲
這篇文章主要介紹了如何用VUE和Canvas實現(xiàn)雷霆戰(zhàn)機(jī)打字類小游戲,麻雀雖小,五臟俱全,對游戲感興趣的同學(xué),可以參考下,研究里面的原理和實現(xiàn)方法2021-04-04
vue中$event使用之獲取當(dāng)前元素及相關(guān)元素
這篇文章主要介紹了vue中$event使用之獲取當(dāng)前元素及相關(guān)元素,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

