LiveNode.js 超簡單的前端跨域、前後端分離解決方案

飛翔的荷蘭人發表於2019-02-16

簡介

LiveNode是一個基於Node.js輕巧的web服務,幫助前端開發者解決本地跨域,程式碼重新整理,以及SPA(單頁應用)前後端服務分離,並且可以用於生產環境專案部署。

Github地址

安裝

全域性安裝livenode腳手架工具

npm install livenode-cli -g

初始化

建立專案

livenode init

根據提示輸入專案檔名稱(不輸入則生成預設名稱)

project name:

輸入要建立的專案模版(不輸入內容即生成多頁專案模板,輸入 spa 則生成單頁面應用專案模版)

project templat:

cd進入生成的專案目錄後,安裝專案所需依賴

npm install

專案說明

src 目錄為專案容器目錄,html、css、js等程式碼放入該目錄即可。(注意!不可修改src目錄名稱)

config.js 為服務配置檔案

引數 描述
port 必填(number) 服務埠
reload (boolean) 在開發環境下是否自動重新整理程式碼
spaHistory (boolean) 專案是否為spa(單頁面應用)的history模式
notFound (string) 多頁服務中404頁面位置,如`/404.html`
proxyTable (array) 代理介面轉發服務

FAQ

  • 當spaHistory設為true時,此時不應設定notFound引數(設定為“字串即可),同理假如設定notFound引數後,spaHistory模式即失效。
  • reload為開發環境下的程式碼修改自動重新整理瀏覽器,上線執行npm build啟動服務時預設會關閉該功能。
  • proxyTable為服務轉發設定,可以處理本地開發介面跨域除錯,也可線上上生產環境中處理前後端分離,轉發代理後端介面服務。

proxyTable

配置介面轉發代理

const proxyTable = [
  {
    host: `http://www.binlive.cn`,
    api: `/api/testApi`
  }, {
    host: `http://www.example.cn`,
    api: `/example`
  }
];

host 為介面域名地址,api 為介面地址,可以配置多個介面轉發。
如需代理restfull API,例如介面為http://www.binlive.cn/api/tes…http://www.binlive.cn/api/tes… 等介面,只需設定api為

{
    host: `http://www.binlive.cn`,
    api: `/api`
 }

服務命令

npm start

啟動開發環境下的node.js服務(⚠️如果已經執行過一次npm start命令,需要先執行npm stop關閉服務,才可以再用 npm start啟動服務,或者可以直接用npm restart 重啟服務)

npm restart

重啟node.js服務,在開發環境下修改config.js配置檔案後需要執行該命令重啟服務

npm run build

啟動生產環境下的node.js服務,在生產環境下修改配置檔案不需要再執行npm restart命令重啟,npm run build會預設監聽配置檔案修改並自動重啟服務。

npm stop

停止node.js服務

npm run list

檢視node.js服務的狀態

相關文章