前端：React/Vue項目打包後的代碼不部署，怎麼在本地運行？
前端web工程要查看運行效果,要怎麼做？
開發時本地預覽：
一般腳手架可以通過配置webpack的webpack-dev-server，
安裝
npm i -D webpack-dev-server
直接運行通過命令行運行
npx webpack serve
打包構建
這時如果直接運行npn run build是可以運行並打包你的代碼的，不會報任何異常或錯誤，但是會看到打包完成有這樣一句提示
打包後會產生dist 目錄
一般情況下，直接打開index.html會在瀏覽器看到內容。
然而驚奇地發現網頁一片空白，絲毫沒有一點點痕跡。打開了控制枱，看到console tab下一片404的各種找不到資源
解決方案
- server https://www.npmjs.com/package...
- http-server https://www.npmjs.com/package...
- live-server https://www.npmjs.com/package...
- 在本地搭建express服務器
- 使用nginx本地服務器
前三種基本使用方法是一致的，都是使用插件這裏以 http-server為例子展開詳情説明
tips: 再加上HTTPS支持，它使服務器成為前端測試的理想之選
流程：全局安裝 –> 在打包好的 dist文件夾直接運行
http-server插件可以簡單創建一個本地服務，執行以下命令全局安裝live-server插件
npm install -g http-server
2、在dist文件夾（剛剛打包成功後出來的文件夾）終端輸入
http-server
默認監聽在8080端口
打開瀏覽器，輸入localhost:8080 就可以預覽了
搭建express本地服務器
流程
1、安裝express-generator
npm i express-generator -g
2、創建一個express項目
express express-project
3、進入項目目錄
cd express-project
這時候能看到express-project文件夾下的內容是這樣的
4、安裝相關項目依賴
npm install
然後把剛剛打包後的dist文件夾下的所有文件複製到public文件夾下面
5、啓動項目
npm run start
6、瀏覽器中查看
在地址欄輸入localhost:3000即可
使用nginx本地服務器運行
1、下載nginx
直接去官網下載 http://nginx.org/en/download.htm
2、解壓，解壓之後目錄如下
2、打開目錄的 html文件夾，刪掉裏面的內容，將已打包的dist文件夾裏面的內容，全部複製到html文件夾下
此時的html文件夾內容是這樣的
3、打開conf文件夾，找到 nginx.conf文件，用編輯器打開
找到http對象中的server，將這部分改一下，其他不用動，listen為端口號
4、啓動項目
雙擊nginx.exe
6、瀏覽器中查看
在地址欄輸入localhost:7080即可
