Vue3項目打包并部署到Nginx實踐
更新時間：2026年01月17日 10:26:13 作者：白滾水_
本文介紹了如何安裝Nginx并部署Vue項目,首先從官網(wǎng)下載Nginx并啟動服務(wù),然后使用Vite構(gòu)建Vue項目,將構(gòu)建好的dist文件夾部署到Nginx目錄下,并修改nginx.conf文件以防止刷新頁面時出現(xiàn)404錯誤,最后,總結(jié)了刷新頁面空白問題的解決方法
一、安裝Nginx
官網(wǎng)下載鏈接：https://nginx.org/en/download.html
下載后解壓并雙擊 nginx.exe 啟動服務(wù)：
打開瀏覽器，訪問 http://localhost/ ，若出現(xiàn)如下頁面，表示安裝成功：
若想停止服務(wù)，命令行運行：
nginx.exe -s stop
二、打包并部署vue項目
1、vite.config.js/vite.config.ts添加build屬性
build: {
sourcemap: false, // 不生成 source map
terserOptions: {
compress: { // 打包時清除 console 和 debug 相關(guān)代碼
drop_console: true,
drop_debugger: true,
},
},
},
2、終端執(zhí)行 npm run build
build 完成后會生成一個 dist 文件夾。
3、部署到Nginx
將 dist 文件夾移動到 Nginx 目錄下，可以重命名為自己想要的名字，此處重命名為 vue-test：
接下來需要修改一下 conf 目錄下 nginx.conf 文件的配置。
自定義設(shè)置ip和端口：
listen 5173;
server_name localhost;設(shè)置要啟動的服務(wù)為 vue-test ，同時為了防止刷新頁面時報錯404，新增 try_files $uri $uri/ /index.html; 這條配置：
location / {
root vue-test;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}另外再加上下面這條配置，同樣是為了防止刷新頁面時出現(xiàn)404找不到頁面：
location @router {
rewrite ^.*$ /index.html last;
}修改完成后整個 nginx.conf 文件的內(nèi)容如下：
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 5173;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root vue-test;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
完成上述所有配置后，啟動Nginx，瀏覽器訪問剛剛自定義的ip+端口，按道理就能夠正常進入前端頁面了。
三、刷新頁面空白問題
如果按照上面過程打包部署到Nginx后，刷新頁面后頁面就變成空白，可嘗試如下修改：
vite.config.js:
// 防止打包后點擊刷新后頁面空白 publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
router.js:
history: createWebHashHistory(process.env.BASE_URL),
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli中模擬數(shù)據(jù)的兩種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
過濾器提供給我們的一種數(shù)據(jù)處理方式。過濾器功能不是必須要使用的，因為它所實現(xiàn)的功能也能用計算屬性或者函數(shù)調(diào)用的方式來實現(xiàn)。這篇文章主要為大家介紹了Vue中過濾器的使用，需要的可以了解一下2023-03-03
深入淺析Vue.js中 computed和methods不同機制
這篇文章給大家介紹了Vue.js中 computed和methods不同機制，在vue.js中，methods和computed兩種方式來動態(tài)當(dāng)作方法使用，文中還給大家提到了computed和methods的區(qū)別，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了Vue跨域請求問題解決方案過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue-router傳遞參數(shù)分為兩大類，一類是編程式的導(dǎo)航 router.push另一類是聲明式的導(dǎo)航 <router-link>，本文通過實例代碼給大家介紹vue-router傳遞參數(shù)的幾種方式，感興趣的朋友跟隨小編一起看看吧2018-11-11
vue3在table里使用elementUI的form表單驗證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇vue element table 表格請求后臺排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05