前端：React/Vue项目打包后的代码不部署，怎么在本地运行？

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