- 打包vue3
npm run build
- 安裝Nginx
這里安裝步驟比較繁瑣，現(xiàn)在服務器比較便宜，如果想用Nginx，可以去菜鳥教程https://www.runoob.com/linux/nginx-install-setup.html
配置安裝一下 - 找到安裝路徑下的
conf文件夾 下nginx.conf文件，用編輯器打開這個文件
里邊的
listen 8080; 端口號
server_name localhost;
location /{
root vue項目打包后的dist文件路徑
index dist中訪問入口文件
}
4. 去cmd中檢查一下配置的文件，
在Nginx 安裝的conf路徑外面執(zhí)行命令
nginx -t -c 磁盤\conf\nginx.conf 回車
可以看到successful 配置成功
5. 啟動 Nginx
start nginx
這時候可以去任務管理器中查看 是否啟動成功，成功可以在任務管理器進程中看到
6. 在瀏覽器中訪問配置的路徑 http://localhost:8080/ 這個是我的配置，大家可以查看上面 第3 步 配置的具體是什么
訪問之后再次刷新頁面會報404
7. 404解決
這里因為 找指定路徑的文件，如果不存在，我們就轉給按個文件
在 Nginx.conf文件下繼續(xù)配置
listen 8080; 端口號
server_name localhost;
location /{
root vue項目打包后的dist文件路徑
index dist中訪問入口文件
try_files $uri $uri/ @router; //找指定路徑的文件，如果不存在，我們就轉給按個文件
}
start nginx 檢查配置是否成功
成功后去 任務管理器中把以前啟動的 Nginx 關掉，然后重啟 這里是以免啟動太多，最好手動全部關掉
再次重啟
start nginx
瀏覽器 訪問 http://localhost:8080/ 這時候刷新404問題解決，哎，又出現(xiàn)500問題，繼續(xù)Nginx.conf配置
文章來源：http://www.zghlxwxcb.cn/news/detail-829684.html
listen 8080; 端口號
server_name localhost;
location /{
root vue項目打包后的dist文件路徑
index index.html index.htm; //dist中訪問入口文件
try_files $uri $uri/ @router; //找指定路徑的文件，如果不存在，我們就轉給按個文件
}
location @router {
rewrite ^.*$ /index.html last;
}
start nginx
關掉任務管理器中的Nginx 然后再次重啟
打開瀏覽器 http://localhost:8080/
500問題解決，報405錯誤，剩下的是后臺，我們前端到此配置完成
總結以上步驟
文章來源地址http://www.zghlxwxcb.cn/news/detail-829684.html
到了這里，關于用Nginx打包部署vue3項目及404和500解決的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
