前端VUE3項(xiàng)目部署到linux服務(wù)器(CentOS?7)完整步驟
更新時(shí)間：2026年01月30日 10:46:29 作者：繳鴻劍Jackson
這篇文章主要介紹了前端VUE3項(xiàng)目部署到linux服務(wù)器(CentOS?7)的相關(guān)資料,包括項(xiàng)目打包、連接服務(wù)器、安裝和配置Nginx、上傳文件以及配置Nginx,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
部署思路
一.本地VUE3項(xiàng)目打包（構(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 # 啟動(dòng)Nginx并設(shè)置開(kāi)機(jī)自啟 sudo systemctl start nginx sudo systemctl enable nginx
3.創(chuàng)建Nginx歡迎頁(yè)
# 創(chuàng)建真正的nginx歡迎頁(yè)面
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.訪問(wèn)Nginx
如下圖，可見(jiàn)此時(shí)確實(shí)成功配置好了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進(jìn)入編輯模式，粘貼以下配置
server {
listen 80;
server_name 123.57.28.163;
# 指向Vue項(xiàng)目的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";
}
# 禁止訪問(wèn)隱藏文件
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)用配置
# 測(cè)試nginx配置語(yǔ)法 sudo nginx -t # 如果沒(méi)有語(yǔ)法錯(cuò)誤，重啟nginx sudo systemctl restart nginx # 查看nginx狀態(tài) sudo systemctl status nginx
最終效果
如果后續(xù)前端頁(yè)面修改，如何更新代碼版本？
當(dāng)你需要更新項(xiàng)目時(shí)，只需
①在本地重新運(yùn)行
npm run build
②然后將新的dist文件夾內(nèi)容上傳覆蓋服務(wù)器上的舊文件，最后重新加載 Nginx (sudo systemctl reload nginx) 即可。
總結(jié)
到此這篇關(guān)于前端VUE3項(xiàng)目部署到linux服務(wù)器的文章就介紹到這了,更多相關(guān)前端VUE3部署linux服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 中常見(jiàn)的時(shí)間格式轉(zhuǎn)換
這篇文章主要介紹了vue 中常見(jiàn)的時(shí)間格式轉(zhuǎn)換,需要的朋友可以參考下2022-05-05
vue項(xiàng)目中l(wèi)ess的一些使用小技巧
前段時(shí)間一直在學(xué)習(xí)vue,開(kāi)始記錄一下遇到的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中l(wèi)ess的一些使用小技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了詳解Vue.js入門(mén)環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue JS對(duì)URL網(wǎng)址進(jìn)行編碼解碼,轉(zhuǎn)換為對(duì)象方式
這篇文章主要介紹了Vue JS對(duì)URL網(wǎng)址進(jìn)行編碼解碼,轉(zhuǎn)換為對(duì)象方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用vue和datatables進(jìn)行表格的服務(wù)器端分頁(yè)實(shí)例代碼
本篇文章主要介紹了使用vue和datatables進(jìn)行表格的服務(wù)器端分頁(yè)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了vue 如何打開(kāi)接口返回的HTML文件，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了elementUI踩坑記錄-el-table問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08
這篇文章主要介紹了Vuex新手的理解與使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05