前段時間，做了一下小項目，項目使用的是傳統(tǒng)的HTML+CSS+JS，沒有采用現(xiàn)在的主流框架，并且是前后端分離的項目，所以面臨了一個跨域問題和本地開發(fā)服務(wù)器（沒有和后端同學(xué)在一起），不要廢話，下面是我用 node 搭建的一個本地服務(wù)器
準(zhǔn)備條件
- node,npm
搭建項目目錄
1553237208(1).jpg
- 初始化項目
npm init -y
- 創(chuàng)建目錄 view 和文件 app.js，view目錄下放我們的項目，app.js 一會用來啟動本地服務(wù)和配置本地代理
- 安裝相關(guān)依賴，只需要兩個個依賴包，express是Web 開發(fā)框架，http-proxy-middleware 就是我們的代理包
npm install express http-proxy-middleware -S
- 編寫app.js, 示例如下：
// 導(dǎo)入express，路徑包，子進程中的異步進程，代理，設(shè)置項目根目錄
const express = require('express')
const path = require('path')
const {exec} = require("child_process")
const proxyMiddleWare = require("http-proxy-middleware")
const root = path.join(__dirname, './view')
// 生成express實例，配置代理，啟動服務(wù)
const app = express();
// 配置代理設(shè)置項 HOST：為目標(biāo)服務(wù)器 POST：為啟動服務(wù)端口
const { HOST = 'http://123.56.231.107:8081/', PORT = '8899' } = {}
const proxyOption ={target:HOST,changeOrigoin:true}
app.set('port', PORT);
// 設(shè)置根目錄為靜態(tài)資源
app.use('/', express.static(root))
// 使用反向代理
app.use("/api",proxyMiddleWare(proxyOption))
// 啟動服務(wù)
app.listen(app.get('port'), () => {
let url = `http://localhost:${app.get('port')}`
// 自動打開默認(rèn)瀏覽器
switch (process.platform) {
case "darwin":
exec(`open ${url}`);
case "win32":
exec(`start ${url}`);
default:
exec(`open ${url}`);
}
})
- 在根文件夾內(nèi)打開控制臺啟動項目 node ./app.js
- 如果想要手機查看，打開 cmd 窗口，輸入 ipconfig 查看本機ip，然后在手機瀏覽器輸入本機 ip + 端口號，即可查看，如果無法訪問，請關(guān)閉電腦防火墻。
