[筆記] 全端開發本機端資料互通 Vue.config.js 設定

在本機端執行前後端(全端)共同開發時,由於前後端都會各自啟用自己的伺服器,那麼前端要怎樣在本機端模擬發送請求到後端拿資料呢?若是運用 Vue.js 的前端框架,可以利用 Vue.config.js 的檔案來進行 Proxy 設定來達成這個目標。
vue.js logo vue


程式碼展示

若前端的本機端為 http://localhost:8000;後端則為則為 http://localhost:3000。當你要在前端模擬連線到後端時,需先在前端專案的資料夾根目錄新增一個檔案叫做:vue.config.js,之後在裡面做設定如下:

P.S. Vue.config.js 的完整設定,可以參考如右的官方文件連結:https://cli.vuejs.org/config/#global-cli-config


其他 Vue.js 相關文章

★全文分享★  [筆記] Vue 按鈕 / 篩選資料架構
[筆記] Vue 按鈕 / 篩選資料架構
這是一篇在 Vue 上實作按鈕 / 篩選器的資料架構筆記。說明按鈕設計方式 將一個個的篩選器 / 按鈕以物件的方式儲存,並存放到一個陣列中 用 computed 來儲存判斷所需的條件 用 watch 作即時的判斷處
★全文分享★  [指南] Vue.js 搭配 Docker 進行佈署
[指南] Vue.js 搭配 Docker 進行佈署
Docker 是個運用了虛擬化技術的套件,讓不同電腦上可以正常執行同樣的電腦程式。之所以有這項需求的產生,是由於每台電腦的作業系統、硬體配置、甚至是操作套件的版本都會有所差異。虛擬機
★全文分享★  [筆記] Vue-Carousel 輕量化輪撥套件介紹
[筆記] Vue-Carousel 輕量化輪撥套件介紹
說到 Carousel 輪撥系列的套件,Swiper 可以說是滿知名的一個,也有整合版的 Vue Awesome Swiper 可供使用。不過若你只是要簡單輕量的輪撥功能,那麼 Vue-Carousel 在使用上更加直覺、方便且檔案大小較小
★全文分享★  [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
[筆記] 在 Vue 中正確引用 src/assets 裡的圖片
在 Vue 專案內放於 src/assets 裡面的圖片檔案,會在打包 npm run build 的時候一起被整合到最終的 img 資料夾。因此,若你要在 Vue 專案引用這些圖片,要特別注意引用寫法,以免無法顯示。說明1. 你需
★全文分享★  [筆記] 將 Vue 專案自動佈署到 Github Pages 上
[筆記] 將 Vue 專案自動佈署到 Github Pages 上
每次完成了一個 Vue 專案,要佈署到 Github 上,往往要手動執行 npm run build 之類的指令才能看到結果。這樣的重複動作,是可以寫腳本 (Script) 讓它自動化的。這篇就是筆記下自動佈署到 Github Pages 上
★全文分享★  [筆記] Vue 如何監控視窗寬度,並讓每個 component 可以取用
[筆記] Vue 如何監控視窗寬度,並讓每個 component 可以取用
Vue 的專案裡,若要監測使用者的視窗大小寬度,最簡便的方法就是在預設的根目錄 Vue 檔案裡加上監聽器,並將此值設置 vuex 中即可。概念1. 在根目錄的 Vue 檔案(App.vue),設置監聽器,並在網頁視窗
★全文分享★  [指南] 在 Vue 專案中,修改 樣式方法
[指南] 在 Vue 專案中,修改 <body data-lazy-src=
★全文分享★  [筆記] 從 Vue CLI 3 開始建立規模化專案
[筆記] 從 Vue CLI 3 開始建立規模化專案
用 Vue CLI 3,可以快速的建立一個 Vue 專案。雖說是方便,但要能夠規模化的管理 vuex, scss, vue-router 等等檔案,還是要自己手動新增 / 刪除一些東西。這邊筆記下自己最新整理出的架構規劃。事前準
★全文分享★  [筆記] 運用 Moment.js 製作 AM / PM 時間外掛
[筆記] 運用 Moment.js 製作 AM / PM 時間外掛
運用 Vue 和 Moment.js 來將 input-time 的 12 小時制時間,轉換成 24 小時制傳送到後端。運用套件和方法1. Vue-router:跳轉到展示 Demo 頁面2. Vue 的 v-model:雙向綁定後,可以在 component 內即時處理3. Vue 的 wat
★全文分享★  [筆記] CodeSandbox 線上編輯器 模擬前端框架
[筆記] CodeSandbox 線上編輯器 模擬前端框架
隨著前端框架的發展,當需要多人編輯、展示或是教學時,CodeSandbox 提供了一個很好的環境來給予模擬。除了 Vue 以外,React, Angular, Vanilla……等等都可以良好支援,同時也可以模擬專案資料夾結構
★全文分享★  [筆記] 工字型樣板,長方形依照比例縮放
[筆記] 工字型樣板,長方形依照比例縮放
這回要挑戰工字型( I-Shape )的顯示樣板。同時,上頭要疊加有個會隨著數值比例而放大縮小的一個長方形。這邊筆記下要如何用 CSS 和 Vue 的綁定 class 樣式來實現。需求這回的樣式需求如下:1. 上方
★全文分享★  [筆記] Element-UI 的自定義表格邊框樣式
[筆記] Element-UI 的自定義表格邊框樣式
Element UI 的表格算是非常常用的模組化套件之一,不過其表格邊框樣試算是非常難以處理的。這邊筆記一下如何客製化的一些步驟(頓時覺得辦公室文書軟體要自定義樣式簡單多了)。需求這回的樣式
★全文分享★  [筆記] Vue 關於 slot-scope 的簡易認知
[筆記] Vue 關於 slot-scope 的簡易認知
Vue 的 slot 系列使用方法,頭一回在 Element-UI 這個模組上看見,覺得用法挺神奇的,於是便筆記一下個人對 slot 的理解,以及怎樣的場景會使用到。核心概念slot 可以分為匿名、具名以及包含資料的 S
★全文分享★  [筆記] Vue Watch 監聽並延後發送請求
[筆記] Vue Watch 監聽並延後發送請求
當使用 Vue Watch 的事件監聽時,若有要觸發傳送 XML 之類的事件時,屢屢發送的話會造成後端伺服器的負擔。你可以運用簡單的 Promise + setTimeout 的技巧,就可以解決這個問題。背後原理1. 先在要啟用
★全文分享★  [筆記] Element UI Table 表格表頭縱向顯示
[筆記] Element UI Table 表格表頭縱向顯示
這回在從事公司專案時,遇上了一個稍嫌難解的問題。在 Element UI Table 表格選項內,它預設是抓取每一個物件的 Key 值名稱,然後對應的資料是由上往下顯示的。不過若你想要客製化的將每一個物件
★全文分享★  [筆記] Vue SCSS 使用 Deep Selectors
[筆記] Vue SCSS 使用 Deep Selectors
在 Vue Sass 的使用方法上,若你有和其他的 Vue 套件一同使用,常會發生 css 選取困難的問題。Vue Loader 有提供所謂的 Deep Selectors,可以幫助你解決這些困擾,順利改動套件的樣式。程式碼示範// scss v
★全文分享★  [筆記] Vue 使用 SCSS
[筆記] Vue 使用 SCSS
運用 Vue-cli 建立的專案,若要使用 SCSS 來較為語意化的管理自己的 css 檔,需要事先做一些設定。這邊筆記下直接在 .vue 中使用的方法和如何引入外部的 .scss 文件,並讓 vue 可以載入 loader 讀取編譯
★全文分享★  [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
[筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
在 Vue template 的檔案,有時會需要運用到 slot-scope=”something” 的語法,但實質上並沒有用到 something 的物件內容。這時可以傳個 {} 空物件進去,就不會報 Vue/no-unused error 了。程式碼示範這個 case 是發生
★全文分享★  [筆記] Vue 生命週期
[筆記] Vue 生命週期
每一個 Vue Instance 在創建時,都會經歷過一個完整的生命週期,這算是 Vue 的初始化過程。在這個過程中,官方預設了許多的 hook 來提供開發者對於不同的階段做操作。生命週期圖週期類別beforeCreate
★全文分享★  [筆記] Vue 單元測試初探
[筆記] Vue 單元測試初探
隨著程式開發越來越龐大,那麼以「程式」測試「程式」是一件值得學習的投資了。除了節省時間外,也可以藉機測試一下程式的邏輯是否如你所預期的。這邊筆記下 Vue 的前端測試的初探與設定。
★全文分享★  [筆記] Vue2 Perfect-Scrollbar 置底開始
[筆記] Vue2 Perfect-Scrollbar 置底開始
Vue 的 Perfect-Scrollbar 套件,是 Vue 中滿常使用的捲軸選單的套件。雖說有內建的一些自訂樣式的選項( 可用 options 載入),不過若要像聊天室一樣,將捲軸條永遠置底,這個就得自己另外設定。程式碼
★全文分享★  [筆記] Vue 的狀態管理 Vuex 實作心得
[筆記] Vue 的狀態管理 Vuex 實作心得
Vuex 是 Vue 中用於狀態管理的工具,你可以將每個頁面、元件都會用到的「狀態」(像是:登入的使用者資料),儲存在前端使用者的瀏覽器中。因為在頁面的切換中,並不會每次都向後端伺服器認證
★全文分享★  [筆記] Vue 自訂綁定 style 標籤
[筆記] Vue 自訂綁定 style 標籤
Vue 中的 v-bind 有一些預設的 style 選項如 :disabled。不過若要客製化的 style 顯示,像是 visibility:hidden 之類的,則可用 :style ={your-customized-style} 來搞定。語法// 若以綁定 visibility:hidden 選項,並依照一定
★全文分享★  [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
運用 express 的框架來架設後端的 Node.js 伺服器時,當遇上前端傳來的表單資料為 multipart/form-data 格式時,那麼 body-parser 套件是不支援的。這時可以運用 multer 套件來解決這個問題。使用範例1.首先先
★全文分享★  [筆記] Vue 頁面元件定時自動跳轉
[筆記] Vue 頁面元件定時自動跳轉
當 Vue 頁面需要定時自動跳轉的功能時,只需在該頁面的 <script> 標籤內撰寫一小段程式碼即可。在撰寫如 404 自動跳轉時可以不必再外掛其他的 JavaScript 了。步驟// 在 Vue 生命週期的 created 階段
★全文分享★  [筆記] Vue 刷新當前頁面
[筆記] Vue 刷新當前頁面
Vue 的使用上,若是要進行完某個操作後重新刷新「當前頁面」的話,用單純的 redirect 是沒有辦法成功跳轉的。這邊要筆記下可以成功實現這個目標的方法。程式碼示範// 在 App.vue 進行設定<template
★全文分享★  [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
這回實際演練來打造一個即時聊天室來練功,使用者可以分為管理員和一般資格。其中使用到的主力套件和技術有:Vue.js, MySQL, Socket.io, passwort & passport-jwt, JavaScript, CSS, Bootstrap。規格開設 (SPEC) 使
★全文分享★  [筆記] BootstrapVue Pagination Vue 分頁套件使用
[筆記] BootstrapVue Pagination Vue 分頁套件使用
在網路世界中常用的前端 css 套件 – Bootstrap,搭配上前端框架 Vue,有好心人已經統整成了 BootstrapVue 的套件,讓 Bootstrap 內的許多元件(components)有更多的運用。這回是要採用裡頭的 Pagination,並整合
★全文分享★  [筆記] Vue 避免 ESLint 的 Unexpected Console Statement
[筆記] Vue 避免 ESLint 的 Unexpected Console Statement
當運用官方套件迅速建立一個 Vue 專案後,若你是採用 ESLint 的規則,那麼在除蟲時會遇見 Unexpected console statement 的錯誤,這是由於 ESLint 的預設規則為 no-console 所導致的。這篇記載下解決這問題方
★全文分享★  [筆記] Vue-cli 輸出 console.log 的結果
[筆記] Vue-cli 輸出 console.log 的結果
使用 Vue-cli 輸出頁面結果到網頁上時,若是需要輸出錯誤結果的瀏覽器的 console.log 結果,會因為預設的 Eslint 語法規則檢查而報錯。這在開發階段算是相當不方便的一件事。所以,這篇筆記下如何
★全文分享★  [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch
[筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch
運用 Vue.js 前端框架,將發送到後端 API 請求的回傳 json 檔案,在頁面上做出分頁、搜尋表格的內容,而不用屢次變動資料就對後端發送請求。實作需求1.分頁表格元件 (component) 的資料由父層的頁面
★全文分享★  [筆記] 解決 Vue-cli 打包後,無法顯示 Favicon 的問題
[筆記] 解決 Vue-cli 打包後,無法顯示 Favicon 的問題
Vue-cli 運用 npm run build 將專案打包成靜態檔案給後端伺服器存取後,常會遇到 Favicon (每個網頁左上角的圖示) 無法正常顯示的問題。這篇筆記下各種解決這個問題的辦法。語法// favicon// 1. 將 index.html
★全文分享★  [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
[筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
這篇是解決不時在測試 Vue 專案上時,常會在瀏覽器的 console 內看見的無效 GET 請求如:http://localhost:8080/sockjs-node/info?t=<一串亂數>,要如何處理。步驟1.若是處在開發階段看到的話,會因為你所
★全文分享★  [筆記] Vue.js & Node.js 專案初始化筆記
[筆記] Vue.js & Node.js 專案初始化筆記
這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案,並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。步驟Vue.js 框架下,其網址多半會帶有 # 字樣。這是
按讚加入粉絲團

延伸閱讀