nginx部署vue專案的詳細圖文教學

2022-09-14 22:13:51

首先需要在伺服器裡下載nginx，

apt-get install nginx

檢查nginx是否安裝，輸入如下命令後若出現版本號則安裝成功

nginx -v

然後啟動nginx

server nginx restart

如果有如下報錯，則按照它的提示下載相關外掛

我這裡下載了2次不同的外掛。直到執行server nginx restart指令成功

此時開啟瀏覽器，輸入你的伺服器ip，就可以看到nginx啟動成功

之後進行Vue專案打包：

在你一般輸入執行npm run dev的地方輸入npm run build就可以完成打包。

如果打包失敗有提示build不存在之類的語句，如圖：

那就試試npm run build:prod，完成打包！

之後會在專案根目錄下自動生成一個預設dist資料夾

然後如果你是在本地打包的話，需要將此資料夾上傳至你的伺服器上。後邊需要用到。

這裡強烈建議將dist檔案放在伺服器裡專門放專案的資料夾，後邊設定路徑的時候方便查詢，比如我是放在了/home/ubuntu/myapp/ruoyi/ruoyi-ui的資料夾下

接下來設定 Nginx

一定要停止nginx的執行，否則設定可能不生效！(關於如何停止nginx，網上教學很多，就找到程序殺死程序就可以，或者用一句指令停止)

我們需要修改nginx.conf

找到有nginx.conf檔案的目錄，我們可以用sudo whereis nginx.conf找到該路徑然後進入該目錄

修改nginx.conf，輸入如下命令：sudo vim nginx.conf,然後你如果是首次設定的話，可以直接複製我下邊的程式碼，記得要修改root裡dist的路徑。

如果是之前設定過其它專案的話，只用把我http裡邊包含的 server 複製到你的檔案對應位置就行！

user root;
worker_processes  1

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/ubuntu/myapp/ruoyi/ruoyi-ui/dist; # 路徑改成自己的dist路徑
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:8080/; #設定監控後端啟動的埠
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root html;
        }
}

然後儲存並退出。

重啟nginx

nginx -s reload

然後存取ip號就可以執行出頁面了！！

大功告成！

總結

到此這篇關於nginx部署vue專案的文章就介紹到這了,更多相關nginx部署vue專案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

nginx部署vue專案的詳細圖文教學

熱門文章