成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何在nuxt中添加proxyTable代理

QLQ / 2664人閱讀

摘要：背景在本地開發(fā)項(xiàng)目的時(shí)候，當(dāng)你習(xí)慣了解決本地跨域的問題，切換到的時(shí)候，你會(huì)發(fā)現(xiàn)，添加了設(shè)置并沒有什么作用，那是因?yàn)槟闶怯玫哪_手架生成的項(xiàng)目，它里面已經(jīng)幫你寫好了相關(guān)的的設(shè)置代碼。覺得運(yùn)行不方便還可以把命令添加到文件里。

背景

在本地開發(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也有中間件的概念，不過這個(gè)中間件不是express的中間件，那么我們怎么添加到nuxt里面去呢？

怎么做 
首先，安裝依賴
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"
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96768.html

相關(guān)文章

  • 服務(wù)端預(yù)渲染之Nuxt(路由篇)

    摘要：前面既然說到了會(huì)把文件夾下面的所有文件編譯成路由，那么子路由需要使用文件夾嵌套才行?？蛻舳耸状卧L問的頁面會(huì)在服務(wù)端做輸出，一旦渲染完成之后，則不會(huì)再在服務(wù)端輸出，則會(huì)一直在客戶端進(jìn)行輸出了。 服務(wù)端預(yù)渲染之Nuxt - 使用 現(xiàn)在大多數(shù)開發(fā)都是基于Vue或者React開發(fā)的，能夠達(dá)到快速開發(fā)的效果，也有一些不足的地方,Nuxt能夠在服務(wù)端做出渲染，然后讓搜索引擎在爬取數(shù)據(jù)的時(shí)候能夠讀到...

    yuanxin 評論0 收藏0

  • vue 服務(wù)器端渲染 nuxt.js初探

    摘要：在調(diào)研插件后，發(fā)現(xiàn)無法滿足以及等要求時(shí)，果斷選用了做服務(wù)器渲染。布局目錄該目錄名為保留的，不可更改。服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑下。它可以在服務(wù)端或路由更新之前被調(diào)用。可用于指定服務(wù)端返回的請求狀態(tài)碼。 開頭還是來一段廢話： 年關(guān)將近，給大家拜個(gè)早年，愿大家年會(huì)都能抽大獎(jiǎng)，來年行大運(yùn)。 廢話不多說，直接進(jìn)正文 項(xiàng)目環(huán)境： 前端vue項(xiàng)目， 需要將新增的幾個(gè)路由頁...

    bingchen 評論0 收藏0

  • vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù)?；卣{(diào)函數(shù)的名字一般是在請求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    lidashuang 評論0 收藏0

  • vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù)?；卣{(diào)函數(shù)的名字一般是在請求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    張金寶 評論0 收藏0

  • 解決vue-axios和vue-resource跨域問題

    摘要：個(gè)人博客同步文章最近在學(xué)習(xí)，在中沒有，而是利用和進(jìn)行數(shù)據(jù)通信。問題在使用的請求時(shí)出現(xiàn)跨域問題。這個(gè)非常重要，困惑了自己好久設(shè)置代理解決跨域問題后注釋掉解決跨域問題同一樣設(shè)置代理方法，不過不需要特別聲明中的內(nèi)容了。 個(gè)人博客同步文章 https://mr-houzi.com/2018/02/... 最近在學(xué)習(xí)vue，在vue中沒有ajax，而是利用vue-resource和vue-ax...

    nanfeiyan 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<