亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解如何在nuxt中添加proxyTable代理

 更新時(shí)間:2018年08月10日 10:39:00   作者:ovensi  
這篇文章主要介紹了詳解如何在nuxt中添加proxyTable代理,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

背景

在本地開(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • element?el-select下拉框選擇失效解決辦法

    element?el-select下拉框選擇失效解決辦法

    el-select即選擇器用于從若干個(gè)候選項(xiàng)中選擇其中一個(gè)(或者多個(gè)),在傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下
    2023-08-08
  • vue實(shí)現(xiàn)井字棋游戲

    vue實(shí)現(xiàn)井字棋游戲

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)井字棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 2種在vue項(xiàng)目中使用百度地圖的簡(jiǎ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)效果

    這篇文章主要介紹了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í)踐示例

    這篇文章主要為大家介紹了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)題

    這篇文章主要介紹了解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題,具有很好的參考價(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è)面的示例

    今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • Vue.js?前端項(xiàng)目在常見(jiàn)?Web?服務(wù)器上的部署配置過(guò)程

    Vue.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
  • 詳解vue3中如何使用shaka-player

    詳解vue3中如何使用shaka-player

    這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • Vue 事件處理操作實(shí)例詳解

    Vue 事件處理操作實(shí)例詳解

    這篇文章主要介紹了Vue 事件處理操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js事件處理相關(guān)的事件監(jiān)聽(tīng)、處理、修飾符等相關(guān)概念、用法及操作注意事項(xiàng),需要的朋友可以參考下
    2019-03-03

最新評(píng)論