vue3項目如何通過Nginx部署至服務器
更新時間：2025年06月04日 16:49:02 作者：Gbbnb
這篇文章主要介紹了vue3項目通過Nginx部署至服務器的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3通過Nginx部署至服務器
1.修改vue項目中的vue.config.js文件
defineConfig 添加配置用于確保部署后的路徑能夠正確訪問（只需添加 base: ‘/’，其他不需要修改 ）
export default defineConfig({
base: '/'
});2.構建項目靜態(tài)文件
在本地開發(fā)環(huán)境中，構建 Vue 3 項目以生成生產(chǎn)環(huán)境的靜態(tài)文件。（該指令會生成包含各項配置的dist文件夾）
npm run build
3.上傳配置文件至云服務器
將dist文件夾上傳至云服務器
scp -r dist 服務器用戶名@服務器IP地址:文件路徑
4.安裝Nginx
在云服務器上安裝Nginx
sudo apt update sudo apt install nginx
5.安裝nodejs
sudo apt-get install -y nodejs
6.配置nginx
sudo vim /etc/nginx/sites-available/default
修改配置文件內(nèi)容為：
server {
listen 80;
server_name _;
root /opt/HIS_Client/dist;
index index.html index.htm index.nginx-debian.html;
location / {
try_files $uri $uri/ /index.html;
}
error_page 404 /index.html;
}listen：想要開啟的端口，默認為80server_name：訪問頁面需要的地址，通常為服務器IP地址root：服務器中dist文件夾地址index：如果是文件夾則優(yōu)先訪問目錄下的index文件try_files：按順序查找文件，都沒有則訪問index.htmlerror_page：錯誤頁面
7.設置文件權限
確保nginx能夠有權限訪問靜態(tài)文件夾目錄
sudo chown -R www-data:www-data 你的dist文件夾地址 sudo chmod -R 755 你的dist文件夾地址
8.開啟防火墻端口
允許防火墻通過該端口進行訪問（假設訪問為80端口）
sudo ufw allow 80
9.云服務器安全組開啟端口允許訪問
添加入方向規(guī)則，允許通過80端口進行訪問
10.重新加載nginx配置文件
nginx配置完成后需重新加載
sudo nginx -c /etc/nginx/nginx.conf
11.開啟Nginx服務
nginx -s reload
12.訪問網(wǎng)址
通過http://服務器ip地址:80 即可訪問
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue + springboot 實現(xiàn)國密SM2加密
本文介紹 Vue+SpringBoot 架構下,基于國密 SM2 實現(xiàn)前后臺數(shù)據(jù)加密傳輸?shù)暮诵牧鞒?文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-01-01
這篇文章主要介紹了vue中的inject用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端input上傳視頻、音頻，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
elementui?el-upload一次請求上傳多個文件的實現(xiàn)
使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
VUE+Canvas 實現(xiàn)桌面彈球消磚塊小游戲的示例代碼
這篇文章主要介紹了VUE+Canvas 實現(xiàn)桌面彈球消磚塊小游戲,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要給大家介紹了關于vue3.0關閉eslint校驗的3種方法,在實際開發(fā)過程中,eslint的作用不可估量,文中將關閉的方法介紹的非常詳細,需要的朋友可以參考下2023-06-06
詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實例形式分析了vue.js單向綁定與雙向綁定相關原理、實現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個使用?Vue.js?開發(fā)所有前端應用的框架,這篇文章主要給大家介紹了關于uniapp使用uview的簡單案例,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了vue項目里的權限控制，文中有詳細的代碼示例供大家參考，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-06-06