一直不理解前端代码怎么转化成软件的,整理了一下web项目上线的过程。手机app之类的应该是同理。
环境:
前端框架:React
前端打包工具:webpack(React已封装)
nginx所在虚机环境:windows
-
搭建React项目并打包
使用脚手架create-react-app创建基础的React项目,创建好的目录如下:
执行"npm run build"命令,进行打包。会生成一个build文件夹,打开如下:
里面的index.html是项目的入口文件 -
将打包后的文件上传到nginx所在的虚机上,nginx所在的目录下
比如,我在本地安装了nginx【Windows下安装Nginx】,就放在nginx的安装目录下:
修改conf/nginx.conf文件的server部分内容,如下:
表示根目录是build文件夹,访问/路径会访问build/index.html -
验证
在nginx的安装目录下执行start nginx启动nginx
在浏览器输入地址localhost,即可看到React项目的页面
补充:nginx启动的默认端口是80,浏览器的默认访问端口也是80,所以不需要写端口号
Tips
- 直接在网上查一些命令,比如怎么安装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:,所以找不到引用的文件。
假如要打开这个文件,可以采用以下两种方法:
- 把dist文件夹布到服务器上
- 将index.html中资源引用的绝对路径改为相对路径
当然,可以选择手动将index.html中所有引用资源的地方全部改成相对路径;
也可以通过设置应用的根路径的方式:
在package.json中设置homepage的值为".":
修改之后,重新打包, index.html文件的内容如下: