[筆記] 全端開發本機端資料互通 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-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.config.js 設定
[筆記] 全端開發本機端資料互通 Vue.config.js 設定
在本機端執行前後端(全端)共同開發時,由於前後端都會各自啟用自己的伺服器,那麼前端要怎樣在本機端模擬發送請求到後端拿資料呢?若是運用 Vue.js 的前端框架,可以利用 Vue.config.js 的檔案來
★全文分享★  [筆記] 解決 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 框架下,其網址多半會帶有 # 字樣。這是
按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:9