vue项目部署到nginx

一.vue项目打包
修改config/index.js的assetsPublicPath为 ./（注意一定是build里面的，下面dev中也有这个配置）

这个路径的配置很重要，默认是项目名称。如果没有修改路径会变成这样，访问不到打包后的文件。就算返回200，你会发现返回的根本不是那些打包后的文件。

打包成dist文件
npm run build
1
这时我们就可以把生成的dist文件扔到服务器就可以了。我这里使用xshell进行远程连接，xftp进行文件传输。

二.配置nginx
安装nginx
安装的步骤我这里不详细介绍，安装后通过nginx -v 可测试是否安装成功

修改nginx的配置文件
默认路径：

vim /etc/nginx/nginx.conf 
1
在 http{ } 中配置一个server

server {
              listen 8080;     #1.你想让你的这个项目跑在哪个端口
              server_name 47.94.76.91;     #2.当前服务器ip
       location / {
           root   /home/dist/;     #3.dist文件的位置(我是直接放在home目录下了) 
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
       }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://47.92.76.97:8848/api; #5.转发地址
        } 
       }
跨域问题在这里着重说一下：

这里的跨域配置是打包后，nginx做的代理转发。在开发模式的proxytable没有任何关系。
如果nginx不进行跨域的配置，虽然项目部署了，但是服务根本就会访问不到
关于跨域的介绍可以看我的另外一篇文章 https://blog.csdn.net/weixin_42565137/article/details/90578780
三.开放端口
像阿里云的服务器都需要开通端口才可以访问的。这个不做详细介绍。
然后我们重启nginx就可以访问我们部署的项目了 service nginx restart

 

终端运行：

sudo nginx -s reload // 修改配置后重新加载生效sudo nginx -s stop // 快速停止nginx

 

２. spring boot项目部署

idea项目打包及运行完整过程

idea打包项目的方式我总结了俩种
第一种流程如下：
首先点击File目录下的ProjectStructuer

然后弹出如下界面选择Artifacts，然后再点击右边的红线处的加号

点击jar选择第二个

然后回弹出如下界面Module选择你所打包的项目MainClass选择你项目的启动类。点击ok完成

如上步骤完成会生成如下文件若此文件已经存在那上面就建不成所以要在建之前查看有没有这个文件有的话将其删掉。

点击build目录下的Build Artifacts

会弹出如下界面点击build开始构建，当出现如下控制台显示的BUILD SUCCESS则构建成功。

第二种流程如下
第二种方式比较简单首先点击右侧的Maven点击弹出如下界面所选内容如下图：

打包好的项目会在如下地方

三、打包好的项目jar运行
打开cmd命令窗口进入到所放项目jar的命令下运行 java -jar 文件名.jar

 

 

总结

以上是生活随笔为你收集整理的vue项目部署到nginx的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。