如何使用Nginx將前端Vue項目部署到云服務器
記錄使用Nginx將純前端的Vue3項目部署到阿里云服務器（Ubuntu 22.04）上，包含通過Nginx代理實現(xiàn)跨域請求、以及個人踩坑記錄~
1.安裝下載Nginx
執(zhí)行下列命令安裝：
apt-get install nginx
安裝完成后查看nignx版本，顯示版本信息則說明安裝成果
root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx -v nginx version: nginx/1.18.0 (Ubuntu)
啟動nginx，如正確啟動，則不會出現(xiàn)任何提示信息。
root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx root@iZbp1e23w2p1t5zrsvqb63Z:~#
nginx啟動成功后打開服務器的外網面板地址，可以看到如下界面，至此成功大半??！
2. 打包vue項目并上傳到服務器上
在VS Code中打開已完成的前端Vue項目，輸入如下命令進行打包，打包完成后再當前目錄下出現(xiàn)名為dist文件夾，即為需要上傳到服務器上的文件夾。
npm run build # 具體是否為build命令需查看項目目錄下的package.json文件（一般都是辣）
可以打開安裝好的寶塔界面，借助寶塔面板將dist文件夾上傳到服務器的某個目錄項，此處為 "home/FloraThumb/"。
3. 修改Nginx配置
首先需要先暫停Nginx服務（一定要做?。。。?/strong>：
root@iZbp1e23w2p1t5zrsvqb63Z:~#nginx -s stop root@iZbp1e23w2p1t5zrsvqb63Z:~#
使用如下命令查看Nginx配置文件路徑：
nginx -t
如下圖所示，本機的配置文件為 /etc/nginx/nginx/conf
使用vim命令打開配置文件進行編輯：
vim /etc/nginx/nginx.conf
在http{}中添加服務server，如下所示
http {
#前面扒拉扒拉都不要動
include /etc/nginx/conf.d/*.conf; #原有別動
include /etc/nginx/sites-enabled/*; #原有別動
#下面是需要手動添加的：++++++++++++++++++
server {
listen 80 ; #可訪問端口號，默認是80，也可設置為其它
server_name 47.98.101.114; #云服務器可訪問外網鏈接
#access_log logs/host.access.log main;
location / {
root /home/FloraThumb/dist; #這里寫vue項目在云服務器中的地址
index index.html; #這里是vue項目的首頁，需要保證dist中有index.html文件
}
error_page 500 502 503 504 /50x.html;#錯誤頁面
}
}nginx.conf文件配置完成后，需要重新加載配置文件，執(zhí)行如下命令
sudo nginx -c /etc/nginx/nginx.conf
完成后重新開啟Nginx服務：
nginx -s reload
此時點擊配置文件中所設置的連接： server_name: listen（ip:port）即可訪問部署完成的網頁，如此處需要訪問 http://47.98.101.114:80
大功告成啦~~~
4. 關于通過Nginx代理實現(xiàn)跨域請求
瀏覽器的同源策略：組織一個域的JavaScript腳本和另一個域的內容進行交互。
所謂同源（即同一個域），就是兩頁頁面具有相同協(xié)議（如http協(xié)議）、主機host和端口號port。
當在前端vue項目中需要調取受同源策略保護的Web API時，即發(fā)生所謂跨域請求，此時發(fā)送不成功，一般可以采用ajax的jsonp發(fā)起跨域請求，而對于vue項目的axios不支持jsonp請求，可以選擇安裝'vue-jsonp'依賴項或修改vue.config.js文件來發(fā)起跨域請求，下文主要講后者的實現(xiàn)。
4.1 開發(fā)環(huán)境
在開發(fā)環(huán)境下，可以通過修改Vue項目的vue.config.js文件來實現(xiàn)跨域請求。
下述代碼中設置了兩個代理請求，一個是 '/api'，代理的目標地址是 https://trefle.io；另一個是'/baidu'，代理的目標地址是即百度領域翻譯API http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate
module.exports = {
devServer: {
proxy: {
'/api': { // '/api'是代理標識，用于告訴node，url前面是/api的就是使用代理的
target: "https://trefle.io", //目標地址，一般是指后臺服務器地址（只到域名即可）
changeOrigin: true, //是否跨域
// pathRewrite: { //重寫路徑（將帶有api換成空字符串）：此處不需要
// '^/api': ''
// }
},
'/baidu': { //
target: "http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate", //目標地址，一般是指后臺服務器地址（只到域名即可）
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑（將帶有/baidu換成空字符串）
'^/baidu': ''
}
},
}
}
}changeOrigin: true 代表支持跨域（必寫）;
pathRewrite代表重寫路徑，是可選項，根據需求選擇（/api無需重寫，而/baidu進行重寫）；
無需重寫路徑以代理'/api'為例，在發(fā)起請求過程中，對于url中以'/api'開頭的請求，會將vue.config.js文件中'/api'對應的target目標地址連接到請求頭部，即若請求url為“ /api/v1/species/”，則實際會將請求發(fā)送到 https://trefle.io/api/v1/species，從而實現(xiàn)跨域請求；
export function getSpecialDetail(data){
return request({
url:"/api/v1/species/" + data.id ,
method:"GET",
headers:{
'Authorization': "<我的token>", #此處為token參數
}
})
}需要重寫路徑以代理'/baidu'為例,在發(fā)起請求過程中，對于url中以'/baidu'開頭的請求，會將vue.config.js文件中'/baidu'對應的target目標地址連接到請求頭部，即若請求url為“ /baidu”，則現(xiàn)將target串聯(lián)到url頭部 http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate/baidu，此時因為代理 /baidu 設置重寫路徑，將'/baidu'重寫為空字符，則實際請求發(fā)送到http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate，從而實現(xiàn)跨域請求；
export function translate(data){
return request({
url:'/baidu',
headers:{
'Access-Control-Allow-Origin':'*',
'Content-Type':'application/x-www-form-urlencoded'
},
method:"POST",
data:data,
});
}4.2 部署環(huán)境
當按照步驟1~3將vue項目部署到云服務器上時，此時在4.2中進行的代理操作將會失效，需要額外對nginx進行如下代理配置。
依舊需要先關閉nginx，在修改配置文件 /etc/nginx/nginx.conf ，如下為代理添加相關配置
server {
listen 80 ;#自己設置端口號
server_name 47.98.101.114;#自己設置項目名稱
#access_log logs/host.access.log main;
location / {
root /home/FloraThumb/dist;#這里寫vue項目的所在地址
index index.html;#這里是vue項目的首頁，需要保證dist中有index.html文件
}
#添加代理配置
location /api{
proxy_pass https://trefle.io;
}
location /baidu {
proxy_pass http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate;
}
error_page 500 502 503 504 /50x.html;#錯誤頁面
}完成后依舊重新加載配置文件
sudo nginx -c /etc/nginx/nginx.conf
再重啟nginx服務即可
nginx -s reload
參考鏈接：
到此這篇關于用Nginx將前端Vue項目部署到云服務器的文章就介紹到這了,更多相關Nginx Vue項目部署到云服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過代碼示例講解的非常詳細,對大家解決問題有一定的幫助,需要的朋友可以參考下2024-05-05
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關于Vue中常見的幾種傳參方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue2 自定義 動態(tài)組件的實現(xiàn)方法,需要的朋友可以參考下2017-06-06
vue前端重構computed及watch組件通信等實用技巧整理
這篇文章主要為大家介紹了vue前端重構computed及watch組件通信等實用技巧整理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
VUE3使用Element-Plus時如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時使用默認的size無法滿足我們的需求時,我們可以自定義字體的大小,但是直接重寫樣式后,并沒有起作用,甚至使用::v-deep深度選擇器也沒有效果,本文介紹VUE3使用Element-Plus時如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09
vue init webpack 建vue項目報錯的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項目報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue2?模版指令元素綁定事件執(zhí)行順序解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了實現(xiàn)一個 Vue 吸頂錨點組件方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
解決ant design vue 表格a-table二次封裝,slots渲染的問題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue如何根據角色獲取菜單動態(tài)添加路由,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01