前端VUE3項目部署到linux服務(wù)器(CentOS?7)完整步驟
更新時間：2026年01月30日 10:46:29 作者：繳鴻劍Jackson
這篇文章主要介紹了前端VUE3項目部署到linux服務(wù)器(CentOS?7)的相關(guān)資料,包括項目打包、連接服務(wù)器、安裝和配置Nginx、上傳文件以及配置Nginx,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
部署思路
一.本地VUE3項目打包（構(gòu)建生產(chǎn)版本）
npm run build
效果展示
二.連接你的阿里云服務(wù)器，下載Nginx
1.使用finalShell連接linux服務(wù)器
2.安裝Nginx
# 更新包管理器并安裝 Nginx sudo yum install epel-release sudo yum install nginx # 啟動Nginx并設(shè)置開機自啟 sudo systemctl start nginx sudo systemctl enable nginx
3.創(chuàng)建Nginx歡迎頁
# 創(chuàng)建真正的nginx歡迎頁面
cat <<EOF | sudo tee /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a rel="external nofollow" >nginx.org</a>.
Commercial support is available at
<a rel="external nofollow" >nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
<p><em>Server Time: $(date)</em></p>
</body>
</html>
EOF4.訪問Nginx
如下圖，可見此時確實成功配置好了linux服務(wù)器的nginx。
三.將dist文件夾，上傳到Linux服務(wù)器
1.創(chuàng)建自定義目錄，用于保存前端代碼
下面我們成功創(chuàng)建了目錄/home/jhj/develop/java_code/vue_his，后續(xù)將前端的代碼都上傳到這里即可。
[root@iZ2zeifvpdudbmulinrasxZ java_code]# pwd /home/jhj/develop/java_code [root@iZ2zeifvpdudbmulinrasxZ java_code]# mkdir vue_his [root@iZ2zeifvpdudbmulinrasxZ java_code]# ls his-0.0.1-SNAPSHOT.jar info.log vue_his [root@iZ2zeifvpdudbmulinrasxZ java_code]# cd vue_his/ [root@iZ2zeifvpdudbmulinrasxZ vue_his]# pwd /home/jhj/develop/java_code/vue_his
2.將dist目錄，上傳到/home/jhj/develop/java_code/vue_his
四.配置 Nginx ，從而使之托管你的網(wǎng)站
1.創(chuàng)建并編輯配置文件
sudo vim /etc/nginx/conf.d/vue-app.conf
2.按i進入編輯模式，粘貼以下配置
server {
listen 80;
server_name 123.57.28.163;
# 指向Vue項目的dist目錄
root /home/jhj/develop/java_code/vue_his/dist;
index index.html;
# 配置Vue Router的history模式支持
location / {
try_files $uri $uri/ /index.html;
}
# 靜態(tài)資源緩存配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 禁止訪問隱藏文件
location ~ /\. {
deny all;
}
# 日志配置
access_log /var/log/nginx/vue-his.access.log;
error_log /var/log/nginx/vue-his.error.log;
# 限制上傳大?。ㄈ绻枰?
client_max_body_size 10M;
}3.檢查并應(yīng)用配置
# 測試nginx配置語法 sudo nginx -t # 如果沒有語法錯誤，重啟nginx sudo systemctl restart nginx # 查看nginx狀態(tài) sudo systemctl status nginx
最終效果
如果后續(xù)前端頁面修改，如何更新代碼版本？
當你需要更新項目時，只需
①在本地重新運行
npm run build
②然后將新的dist文件夾內(nèi)容上傳覆蓋服務(wù)器上的舊文件，最后重新加載 Nginx (sudo systemctl reload nginx) 即可。
總結(jié)
到此這篇關(guān)于前端VUE3項目部署到linux服務(wù)器的文章就介紹到這了,更多相關(guān)前端VUE3部署linux服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 中常見的時間格式轉(zhuǎn)換,需要的朋友可以參考下2022-05-05
前段時間一直在學習vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式
這篇文章主要介紹了Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用vue和datatables進行表格的服務(wù)器端分頁實例代碼
本篇文章主要介紹了使用vue和datatables進行表格的服務(wù)器端分頁實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了vue 如何打開接口返回的HTML文件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應(yīng)的PDF
這篇文章主要為大家詳細介紹了vue如何使用html2canvas實現(xiàn)將DOM節(jié)點生成對應(yīng)的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學習一下2023-08-08
這篇文章主要介紹了Vuex新手的理解與使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05