一誊役、在 Ubuntu 上安裝 Nginx
sudo apt-get update
sudo apt install curl gnupg2 ca-certificates lsb-release
echo "deb http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \
| sudo tee /etc/apt/sources.list.d/nginx.list
curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo apt-key add -
sudo apt-key fingerprint ABF5BD827BD9BF62
sudo apt install nginx
// 啟動 nginx
service nginx restart // service nginx reload
至此般堆，訪問域名應(yīng)該可以看到 nginx 的歡迎頁了敬肚。
image.png
二菜循、配置 nginx 的 nginx.conf捅膘，主配置文件的路徑為：
/etc/nginx/nginx.conf
vim /etc/nginx/nginx.conf
查看該文件包含了兩個文件目錄：
image.png
實際的配置文件是
/etc/nginx/sites-enabled/default現(xiàn)在需要修改該文件的server節(jié)點：
修改前：
image.png
修改后：
server {
listen 80;
listen [::]:80;
server_name qzsjfc.xyz; # 這里是網(wǎng)站的域名
root /var/www/qzsjfc.xyz; # /vue/dist/ 打包后的dist目錄
location / {
try_files $uri $uri/ @router; # 指向下面的 @router否則會出現(xiàn) 404
index index.html index.htm;
}
# 對應(yīng)上面的 @router,主要Vue請求并不是真實路徑添祸，無法找到文件，需要重定向到 index.html 中寻仗，然后交給路由處理
location @router {
rewrite ^.*$ /index.html last;
}
}
重新加載 nginx 配置文件：
nginx -s reload
這是在訪問時報錯刃泌，說明生效了：
image.png
三、編譯vue并上傳到
/var/www/qzsjfc.xyz 目錄
npm run build
image.png
編譯后的 dist 目錄：
image.png
上傳之后署尤，就可以訪問了耙替。
四、解決跨域問題曹体。
Vue 開發(fā)時俗扇，設(shè)置了 proxyTable 解決跨域訪問后臺的問題。
image.png
當(dāng)部署到 nginx 后箕别，需要重新配置代理铜幽，將請求轉(zhuǎn)發(fā)到 tomcat 上。
location /api/ {
proxy_pass http://localhost:8080/; # 代理接口的地址串稀，配置后請求會自動轉(zhuǎn)發(fā)到 http://localhost:8080/api/ 上
}
