前端页面打包部署到虚拟机的nginx(后端写的)

原创已于 2023-05-11 17:11:46 修改 · 517 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nginx

于 2023-05-06 15:04:45 首次发布

对于初学后端开发者，不熟悉Vue的情况下，可以在没有前端框架的项目中，手动创建HTML和JS文件进行测试。文章介绍了如何将这些文件打包并利用Nginx部署到虚拟机上，包括修改nginx.conf配置文件来指定HTML和JS文件的位置，以便正确加载页面和资源。

前端不用看这篇文章，对你们来说应该没用。

在项目部署到虚拟机上面的时候前端和后端都需要打包才能部署到虚拟机上面对吧，但对于初学后端的人来说，没有学vue就很痛苦了，毕竟写个前端页面就可以测试自己后端写没写好，要求又不高，有html和js就行了。

网上说的打包方式都是npm run build，这是vue的命令，没有用vue的话根本用不了，害怕自己写个文件夹不打包会缺少一些东西，或者目录结构不对，结果卡在这里，我就创建了一个vue项目打包后，发现dist文件里面就给我放进去了一个index.html文件，但使用nginx进入IP地址后可以进入index.html,就是没有其他html和js文件，所以我这里取了巧，创建dist文件把html和js文件创建两个目录分别放进去就可以了，dist文件夹位置随便你放在虚拟机哪个位置，只要你找得到就行，之后进入nginx目录，注意，这个目录是运行nginx后生成的目录，不是nginx的安装目录，进入nginx后找到并进入conf文件夹，使用vi命令编辑conf文件夹里的nginx.conf文件，找到

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

接着就写你的前端打包文件位置，我这里是在创建的project目录下

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root /project/dist/html;
            index CommodityValue.html;
        }
        location /js/ {
            root /project/dist;
        }

        location /html/ {
            root /project/dist;
        }

意思就是使用nginx进入虚拟机ip地址后会进入/project/dist/html目录里面找到CommodityValue.html当作进入ip地址后的首页，下面两段作用是加载同级目录的js和html目录，你要是不写他就不给你加载到浏览器里面去，只有一个首页。

这就改完了，nginx.conf文件其他不要动，就改我说的这部分就行了，之后重新运行nginx，打开浏览器输入虚拟机ip地址就可以看到效果了。

你要是没安装nginx的话看nginx安装到linux这篇文章吧，虽然我觉得能搜到这篇文章的人多半都已经安装好了。