关于前端:前端ReactVue项目打包后的代码不部署怎么在本地运行

前端：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 即可