首先需要在服務(wù)器里下載nginx，

apt-get install nginx

檢查nginx是否安裝，輸入如下命令后若出現(xiàn)版本號(hào)則安裝成功

nginx -v

然后啟動(dòng)nginx

server nginx restart

如果有如下報(bào)錯(cuò)，則按照它的提示下載相關(guān)插件

我這里下載了2次不同的插件。直到運(yùn)行server nginx restart指令成功

此時(shí)打開瀏覽器，輸入你的服務(wù)器ip，就可以看到nginx啟動(dòng)成功

之后進(jìn)行Vue項(xiàng)目打包：

在你一般輸入運(yùn)行npm run dev的地方輸入npm run build就可以完成打包。

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

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

之后會(huì)在項(xiàng)目根目錄下自動(dòng)生成一個(gè)默認(rèn)dist文件夾

然后如果你是在本地打包的話，需要將此文件夾上傳至你的服務(wù)器上。后邊需要用到。

這里強(qiáng)烈建議將dist文件放在服務(wù)器里專門放項(xiàng)目的文件夾，后邊設(shè)置路徑的時(shí)候方便查找，比如我是放在了/home/ubuntu/myapp/ruoyi/ruoyi-ui的文件夾下

接下來配置 Nginx

一定要停止nginx的運(yùn)行，否則配置可能不生效！(關(guān)于如何停止nginx，網(wǎng)上教程很多，就找到進(jìn)程殺死進(jìn)程就可以，或者用一句指令停止)

我們需要修改nginx.conf

找到有nginx.conf文件的目錄，我們可以用sudo whereis nginx.conf找到該路徑然后進(jìn)入該目錄

修改nginx.conf，輸入如下命令：sudo vim nginx.conf,然后你如果是首次配置的話，可以直接復(fù)制我下邊的代碼，記得要修改root里dist的路徑。
如果是之前配置過其它項(xiàng)目的話，只用把我http里邊包含的 server 復(fù)制到你的文件對(duì)應(yīng)位置就行！

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/; #設(shè)置監(jiān)控后端啟動(dòng)的端口
        }


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

}

然后保存并退出。

重啟nginx

nginx -s reload

然后訪問ip號(hào)就可以運(yùn)行出頁面了！！

大功告成！

總結(jié)

到此這篇關(guān)于利用nginx部署vue項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx部署vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！