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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。