摘要:背景在本地開發項目的時候,當你習慣了解決本地跨域的問題,切換到的時候,你會發現,添加了設置并沒有什么作用,那是因為你是用的腳手架生成的項目,它里面已經幫你寫好了相關的的設置代碼。覺得運行不方便還可以把命令添加到文件里。
背景
在本地開發vue項目的時候,當你習慣了proxyTable解決本地跨域的問題,切換到nuxt的時候,你會發現,添加了proxyTable設置并沒有什么作用,那是因為你是用的vue腳手架生成的vue項目,它里面已經幫你寫好了相關的proxyTable的設置代碼。
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
然后在根目錄創建一個文件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 }) // 生產模式不需要 build if (!isProd) { const builder = new Builder(nuxt) builder.build() } // proxy api requests這里就是添加的proxyTable中間價的設置了 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渲染層服務的中間件 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運行就可以了。
覺得運行不方便還可以把命令添加到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" } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96768.html
摘要:前面既然說到了會把文件夾下面的所有文件編譯成路由,那么子路由需要使用文件夾嵌套才行。客戶端首次訪問的頁面會在服務端做輸出,一旦渲染完成之后,則不會再在服務端輸出,則會一直在客戶端進行輸出了。 服務端預渲染之Nuxt - 使用 現在大多數開發都是基于Vue或者React開發的,能夠達到快速開發的效果,也有一些不足的地方,Nuxt能夠在服務端做出渲染,然后讓搜索引擎在爬取數據的時候能夠讀到...
摘要:在調研插件后,發現無法滿足以及等要求時,果斷選用了做服務器渲染。布局目錄該目錄名為保留的,不可更改。服務器啟動的時候,該目錄下的文件會映射至應用的根路徑下。它可以在服務端或路由更新之前被調用。可用于指定服務端返回的請求狀態碼。 開頭還是來一段廢話: 年關將近,給大家拜個早年,愿大家年會都能抽大獎,來年行大運。 廢話不多說,直接進正文 項目環境: 前端vue項目, 需要將新增的幾個路由頁...
摘要:由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。動態創建標簽,設置其,回調函數在中設置在頁面中,返回的作為參數傳入回調函數中,我們通過回調函數來來操作數據。 什么是跨域? 同源策略規定了如果兩個 url 的協議、域名、端口中有任何一個不等,就認定它們跨源了。 跨域的解決方式有哪幾種? 1.JSONP 是 JSON with ...
摘要:由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。動態創建標簽,設置其,回調函數在中設置在頁面中,返回的作為參數傳入回調函數中,我們通過回調函數來來操作數據。 什么是跨域? 同源策略規定了如果兩個 url 的協議、域名、端口中有任何一個不等,就認定它們跨源了。 跨域的解決方式有哪幾種? 1.JSONP 是 JSON with ...
摘要:個人博客同步文章最近在學習,在中沒有,而是利用和進行數據通信。問題在使用的請求時出現跨域問題。這個非常重要,困惑了自己好久設置代理解決跨域問題后注釋掉解決跨域問題同一樣設置代理方法,不過不需要特別聲明中的內容了。 個人博客同步文章 https://mr-houzi.com/2018/02/... 最近在學習vue,在vue中沒有ajax,而是利用vue-resource和vue-ax...
閱讀 1074·2021-11-24 09:39
閱讀 1307·2021-11-18 13:18
閱讀 2425·2021-11-15 11:38
閱讀 1824·2021-09-26 09:47
閱讀 1625·2021-09-22 15:09
閱讀 1624·2021-09-03 10:29
閱讀 1510·2019-08-29 17:28
閱讀 2951·2019-08-29 16:30