首先需要在服務器里下載nginx，
apt-get install nginx
檢查nginx是否安裝，輸入如下命令后若出現(xiàn)版本號則安裝成功
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，網(wǎng)上教程很多，就找到進程殺死進程就可以，或者用一句指令停止)
我們需要修改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/; #設置監(jiān)控后端啟動的端口
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
然后保存并退出。
重啟nginx
nginx -s reload
然后訪問ip號就可以運行出頁面了！！
大功告成！
總結
