腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

vue3項目如何通過Nginx部署至服務(wù)器

更新時間：2025年06月04日 16:49:02 作者：Gbbnb

這篇文章主要介紹了vue3項目通過Nginx部署至服務(wù)器的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1.修改vue項目中的vue.config.js文件
2.構(gòu)建項目靜態(tài)文件
3.上傳配置文件至云服務(wù)器
4.安裝Nginx
5.安裝nodejs
6.配置nginx
7.設(shè)置文件權(quán)限
8.開啟防火墻端口
9.云服務(wù)器安全組開啟端口允許訪問
10.重新加載nginx配置文件
11.開啟Nginx服務(wù)
12.訪問網(wǎng)址

總結(jié)

vue3通過Nginx部署至服務(wù)器

1.修改vue項目中的vue.config.js文件

defineConfig 添加配置用于確保部署后的路徑能夠正確訪問（只需添加 base: ‘/’，其他不需要修改）

export default defineConfig({
    base: '/'
});

2.構(gòu)建項目靜態(tài)文件

在本地開發(fā)環(huán)境中，構(gòu)建 Vue 3 項目以生成生產(chǎn)環(huán)境的靜態(tài)文件。（該指令會生成包含各項配置的dist文件夾）

npm run build

3.上傳配置文件至云服務(wù)器

將dist文件夾上傳至云服務(wù)器

scp -r dist 服務(wù)器用戶名@服務(wù)器IP地址:文件路徑

4.安裝Nginx

在云服務(wù)器上安裝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：想要開啟的端口，默認為80
server_name：訪問頁面需要的地址，通常為服務(wù)器IP地址
root：服務(wù)器中dist文件夾地址
index：如果是文件夾則優(yōu)先訪問目錄下的index文件
try_files：按順序查找文件，都沒有則訪問index.html
error_page：錯誤頁面

7.設(shè)置文件權(quán)限

確保nginx能夠有權(quán)限訪問靜態(tài)文件夾目錄

sudo chown -R www-data:www-data 你的dist文件夾地址
sudo chmod -R 755 你的dist文件夾地址

8.開啟防火墻端口

允許防火墻通過該端口進行訪問（假設(shè)訪問為80端口）

sudo ufw allow 80

9.云服務(wù)器安全組開啟端口允許訪問

添加入方向規(guī)則，允許通過80端口進行訪問

10.重新加載nginx配置文件

nginx配置完成后需重新加載

sudo nginx -c /etc/nginx/nginx.conf

11.開啟Nginx服務(wù)

nginx -s reload

12.訪問網(wǎng)址

通過http://服務(wù)器ip地址:80 即可訪問

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频