仵航说 Vue项目如何打包并发布到linux服务器 仵老大

1,打包

1.1首先你会在本地编辑好你的代码,

1.2然后在控制台输入 npm run build

npm run build

1.3稍等片刻就打包完毕

2,位置

2.1打包完毕之后会在项目中生成一个dist文件,里面有一个html文件还有一个static文件里面就是各种js css

2.2右键你的项目上面 找到Show Explorer 这个就是打开你项目文件夹的方法

2.3进入文件就看到了dist,点击进入 看到了一个static文件夹还有一个index.html 只有这么多 这样打包就是这样的

3.上传

3.1linux下找到属于你项目的tomcat 我的前端是 9093端口的

cd apache-tomcat-9.0.40_9093/webapps/ROOT/

可以看到在ROOT下面 有static 和index.html 如果你没有ROOT文件夹你就建一个

3.2点击上面xftp上传

3.3左边的路径是你本地的,刚才打开项目文件夹的时候就看到地址直接复制进来

右边是项目的 可以在这里直接删除

然后把左边的 复制到右边去

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/ -f

sudo cp /home/sysopex/apache-tomcat-9.0.40_9093/webapps/ROOT/static/ /usr/local/nginx/html/ -r

cd /usr/local/nginx

sudo ./sbin/nginx -s reload

3.5这个时候就可以在浏览器输入网站的ip跟端口还有路径进行访问了

我的是

http://192.168.251.62:9093/reportTools/customQuery