1.finalShell

部署的服務(wù)器是阿里云買的,使用finalShell根據(jù)賬號秘密鏈接服務(wù)器即可

2.配置文件抽離

找到/user/local/nginx/conf/下面的nginx.conf文件進(jìn)行配置,這里單獨(dú)新建一個finace.conf文件,配置后再導(dǎo)入到nginx.conf文件,便于管理

3.靜態(tài)資源入口配置-代理配置

server {
    listen 8081;
    server_name 127.0.0.1;
    
    location / {
	   root /www;//靜態(tài)資源位置,位于根目錄下的www文件夾,項目build后dist文件里的東西直接搞里頭
	   index index.html index.htm;
	   try_files $uri $uri/ /index.html; 
    }
	
	//對以/finance-web/開頭的URL的請求被代理到http://127.0.0.1:8088/finace-web/
	location /finace-web/ {
	   proxy_pass http://127.0.0.1:8088/finace-web/;
	   proxy_headers_hash_max_size 51200;
	   proxy_headers_hash_bucket_size 6400; 
	   proxy_redirect off;
	   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
	   proxy_set_header Host $http_host;
	   proxy_set_header X-Real-IP $remote_addr;
	   proxy_set_header X-Forwarded-For $remote_addr;
	   proxy_set_header X-Nginx_Proxy true;
	}
	  
}

這個Nginx服務(wù)器配置設(shè)置了一個監(jiān)聽端口為8081的服務(wù)器，服務(wù)器名稱設(shè)置為127.0.0.1。它包含兩個主要的location塊：

用于提供靜態(tài)文件的位置（/）：

對根URL的請求從/www目錄提供服務(wù)。
如果找不到文件，則嘗試提供index.html或index.htm。
如果找不到這些文件，則提供/index.html。
用于代理請求到后端服務(wù)器的位置（/finance-web/）：

對以/finance-web/開頭的URL的請求被代理到http://127.0.0.1:8088/finace-web/。(前后端部署在同一個服務(wù)器)
它設(shè)置了各種代理頭，如X-Forwarded-For、Host、X-Real-IP和X-Nginx_Proxy，將它們設(shè)置為適合后端服務(wù)器的值。

總結(jié)一下，這個配置允許Nginx從一個目錄提供靜態(tài)文件服務(wù)，同時將特定路徑的請求代理到另一個服務(wù)器。在修改配置后，請確保重新加載Nginx。

輸入nginx -h查看重啟命令

4.nginx部署項目后devServer中的代理不再生效的問題

當(dāng)你將Vue項目部署到Nginx后，Vue CLI 內(nèi)置的開發(fā)服務(wù)器（通常稱為 devServer）中配置的代理將不再生效。這是因為在生產(chǎn)環(huán)境中，Nginx 接管了所有的請求，并負(fù)責(zé)將它們路由到正確的地方，而不是通過 Vue CLI 的 devServer 進(jìn)行代理。

當(dāng)你在開發(fā)環(huán)境中運(yùn)行 Vue 項目時，devServer 的代理配置允許你將特定的請求代理到后端服務(wù)器，以便在開發(fā)過程中模擬生產(chǎn)環(huán)境中的 API 請求。但是，一旦你將 Vue 項目部署到 Nginx 中，Nginx 將成為前端和后端之間的統(tǒng)一入口，所有的請求都將由 Nginx 接收并處理。

因此，如果你的 Vue 項目中有依賴于代理的請求，你需要在 Nginx 配置中設(shè)置適當(dāng)?shù)拇硪?guī)則，以確保這些請求被正確路由到后端服務(wù)器。文章來源地址http://www.zghlxwxcb.cn/news/detail-838335.html

到了這里，關(guān)于vue項目通過nginx部署到服務(wù)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！