前端：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文件夹间接运行
graph LR
A[全局装置] -- http-serve --> B(打包好的 `dist` 文件夹间接运行)
http-server 插件能够简略创立一个本地服务，执行以下命令全局装置 live-server 插件
npm install -g http-server
2、在 dist 文件夹（刚刚打包胜利后进去的文件夹）终端输出
http-server
默认监听在 8080 端口
关上浏览器，输出 localhost:8080 就能够预览了
搭建 express 本地服务器
流程
graph TB
A[全局装置] --npm i express-generator -g --> C(创立我的项目)--express express-projec -->D(拷贝打包代码)-->E(启动我的项目)-- npm run start--> F(浏览器查看)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 即可