前端：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 LRA[全局装置] -- http-serve --> B(打包好的 `dist`文件夹间接运行)

http-server插件能够简略创立一个本地服务，执行以下命令全局装置live-server插件

npm install -g http-server

2、在dist文件夹（刚刚打包胜利后进去的文件夹）终端输出

http-server

默认监听在8080端口
关上浏览器，输出localhost:8080 就能够预览了

搭建express本地服务器

流程

graph TBA[全局装置] --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即可