前端项目如何打包到Java项目中 前端项目打包上线流程

一直不理解前端代码怎么转化成软件的，整理了一下web项目上线的过程。手机app之类的应该是同理。

环境：

前端框架：React
前端打包工具：webpack(React已封装)
nginx所在虚机环境：windows

2. 搭建React项目并打包
   使用脚手架create-react-app创建基础的React项目，创建好的目录如下：



3. 执行"npm run build"命令，进行打包。会生成一个build文件夹，打开如下：



4. 里面的index.html是项目的入口文件
6. 将打包后的文件上传到nginx所在的虚机上，nginx所在的目录下
   比如，我在本地安装了nginx【Windows下安装Nginx】，就放在nginx的安装目录下：



7. 修改conf/nginx.conf文件的server部分内容，如下：



8. 表示根目录是build文件夹，访问/路径会访问build/index.html
10. 验证
    在nginx的安装目录下执行start nginx启动nginx



11. 在浏览器输入地址localhost，即可看到React项目的页面



12. 补充：nginx启动的默认端口是80，浏览器的默认访问端口也是80，所以不需要写端口号

Tips

1. 直接在网上查一些命令，比如怎么安装nginx，搜到的可能并不适用。这是因为跟操作系统有关，所以要搜索比如“windows怎么安装nginx

打包后的index.html文件不可以直接访问

参考vue 打开html流_三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题… 打包后的文件夹里面有index.html文件，直接用浏览器打开往往会报错：Failed to load resource: net::ERR_FILE_NOT_FOUND

为什么打不开？

dist文件本身就是需要放在服务器上运行的，该文件内的资源默认放在根目录下。

打开index.html可以发现，css和js文件的引用使用的是绝对路径：

而对于本地磁盘来说，/指向磁盘根目录，比如e:，所以找不到引用的文件。

假如要打开这个文件,可以采用以下两种方法：

1. 把dist文件夹布到服务器上
2. 将index.html中资源引用的绝对路径改为相对路径
   当然，可以选择手动将index.html中所有引用资源的地方全部改成相对路径；
   也可以通过设置应用的根路径的方式：
   在package.json中设置homepage的值为".":
   
   修改之后，重新打包， index.html文件的内容如下：