1.打包

1.1首先你会在本地编辑好你的代码,
1.2然后在控制台输入 npm run buildnpm run build
1.3稍等片刻就打包完毕
第一步.png

2.位置

2.1打包完毕之后会在项目中生成一个dist文件,里面有一个html文件还有一个static文件里面就是各种js css
第二步.png
2.2右键你的项目上面 找到Show Explorer 这个就是打开你项目文件夹的方法
第三步.png
2.3进入文件就看到了dist,点击进入 看到了一个static文件夹还有一个index.html 只有这么多 这样打包就是这样的
第四步.png

3.上传

3.1linux下找到属于你项目的tomcat 我的前端是 9093端口的cd apache-tomcat-9.0.40_9093/webapps/ROOT/
可以看到在ROOT下面 有static 和index.html 如果你没有ROOT文件夹你就建一个
第六步.png
3.2点击上面xftp上传
第七步.png
3.3左边的路径是你本地的,刚才打开项目文件夹的时候就看到地址直接复制进来
右边是项目的 可以在这里直接删除
然后把左边的 复制到右边去
第八步.png
3.4这样 就可以了
现在需要把你这个目录下的复制到nginx下 然后重启 nginx服务
sudo的意思类似于赋权 因为你在公司肯定不是root用户
-f的意思类似于for循环 把你项目中所有的都复制过去
nginx -s reload 就是重启
如果你是第一次启动 直接进入文件夹 输入 nginx就可以

sudo cp /home/sysopex/apache-tomcat-9.0.40_9093/webapps/ROOT/index.html /usr/local/nginx/html/ -fsudo cp /home/sysopex/apache-tomcat-9.0.40_9093/webapps/ROOT/static/ /usr/local/nginx/html/ -rcd /usr/local/nginxsudo ./sbin/nginx -s reload

第九步.png
3.5这个时候就可以在浏览器输入网站的ip跟端口还有路径进行访问了
我的是
http://192.168.251.62:9093/reportTools/customQuery
第十一步.png

最后修改:2020 年 12 月 27 日 11 : 13 AM
如果觉得我的文章对你有用,请随意赞赏