使用node.js+express或者使用node.js+pm2搭建服務(wù)器，將vue或react打包后生成的dist目錄在本地運(yùn)行

vue項(xiàng)目打包后生成的dist目錄如果直接在本地打開index.html,在瀏覽器中會報錯，無法運(yùn)行起來。
通常我是放到后端搭建的服務(wù)上面去運(yùn)行，當(dāng)時前端自己也可以是node，nuxt搭建服務(wù)器，寫接口等等
如果想在本地運(yùn)行，我們可以借助node.js+express搭建一個服務(wù)器，將打包后的文件部署在服務(wù)器上，就可以運(yùn)行起來了。

安裝

npm install express -g
npm install express-generator -g
npm install pm2 -g

或者一起安裝

npm i express express-generator pm2 -g

創(chuàng)建

安裝好之后創(chuàng)建項(xiàng)目
express + 自定義名稱

安裝依賴

   cd serve 進(jìn)入項(xiàng)目
   npm install 下載依賴
   npm start  啟動項(xiàng)目

看到下面的圖證明服務(wù)已經(jīng)開啟，端口號的什么的自己看代碼去更改（默認(rèn)是3000，在/bin/www文件中）

在瀏覽器打開 http://localhost:3000/# 看到到下面的圖證明成功了

使用pm2

上面運(yùn)行服務(wù)也可以，不是長時間不用會自動關(guān)閉，如果想部署到云服務(wù)器上面推薦使用pm2 上面我已經(jīng)讓你安裝過了！
運(yùn)行命令為：

pm2 start ./bin/www  
//或者
pm2 start app.js

pm2官網(wǎng)，這里不多贅述
常用pm2命令：

pm2 start
pm2 list
pm2 kill
pm2 stop app_name|app_id|all
pm2 start app_name|app_id|all
pm2 delete app_name|app_id|all
pm2 restart/reload app_name|app_id|all

$ pm2 start app.js # 啟動app.js應(yīng)用程序

$ pm2 start app.js -i 4 # cluster mode 模式啟動4個app.js的應(yīng)用實(shí)例 # 4個應(yīng)用程序會自動進(jìn)行負(fù)載均衡

$ pm2 start app.js --name=“api” # 啟動應(yīng)用程序并命名為 “api”

$ pm2 start app.js --watch # 當(dāng)文件變化時自動重啟應(yīng)用

$ pm2 start script.sh # 啟動 bash 腳本

$ pm2 list # 列表 PM2 啟動的所有的應(yīng)用程序

$ pm2 monit # 顯示每個應(yīng)用程序的CPU和內(nèi)存占用情況

$ pm2 show [app-name] # 顯示應(yīng)用程序的所有信息

$ pm2 logs # 顯示所有應(yīng)用程序的日志

$ pm2 logs [app-name] # 顯示指定應(yīng)用程序的日志

$ pm2 flush

$ pm2 stop all # 停止所有的應(yīng)用程序

$ pm2 stop 0 # 停止 id為 0的指定應(yīng)用程序

$ pm2 restart all # 重啟所有應(yīng)用

$ pm2 reload all # 重啟 cluster mode下的所有應(yīng)用

$ pm2 gracefulReload all # Graceful reload all apps in cluster mode

$ pm2 delete all # 關(guān)閉并刪除所有應(yīng)用

$ pm2 delete 0 # 刪除指定應(yīng)用 id 0

$ pm2 scale api 10 # 把名字叫api的應(yīng)用擴(kuò)展到10個實(shí)例

$ pm2 reset [app-name] # 重置重啟數(shù)量

$ pm2 startup # 創(chuàng)建開機(jī)自啟動命令

$ pm2 save # 保存當(dāng)前應(yīng)用列表

$ pm2 resurrect # 重新加載保存的應(yīng)用列表

$ pm2 update # Save processes, kill PM2 and restore processes

$ pm2 generate # Generate a sample json configuration file

$ pm2 deploy app.json prod setup # Setup “prod” remote server

$ pm2 deploy app.json prod # Update “prod” remote server

$ pm2 deploy app.json prod revert 2 # Revert “prod” remote server by 2

$ pm2 module:generate [name] # Generate sample module with name [name]

$ pm2 install pm2-logrotate # Install module (here a log rotation system)

$ pm2 uninstall pm2-logrotate # Uninstall module

$ pm2 publish # Increment version, git push and npm publish

放包

將前端打包的好的dist文件夾里面的所有內(nèi)容復(fù)制到剛才創(chuàng)建項(xiàng)目的public文件夾里面
你在去瀏覽器上面刷新頁面，會看到你打包的頁面已經(jīng)顯示出來了

下面告訴你如何用node寫接口的，下面這個圖應(yīng)該會很清晰

例子

user下查看所有用戶的接口（最簡單的接口）

前端調(diào)接口拿到數(shù)據(jù)庫中的數(shù)據(jù)
文章來源地址http://www.zghlxwxcb.cn/news/detail-775001.html

到了這里，關(guān)于使用node搭建服務(wù)器，前端自己寫接口，將vue或react打包后生成的dist目錄在本地運(yùn)行的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！