如果你在部署 Vue 項目時使用了 Nginx 作為反向代理服務器,那么你可能會遇到 Vue 頁面白屏的問題。這篇文章將會介紹如何在 Nginx 中正確部署 Vue 項目,以解決白屏問題。
首先,需要將 Vue 項目打包成靜態文件,使用 Nginx 作為靜態文件的 web 服務器。在 Vue 項目根目錄下運行以下命令:
npm run build
執行成功后,會在項目的/dist
目錄下生成靜態文件。
接著,在 Nginx 的配置文件中添加以下配置:
server { listen 80; server_name localhost; root /path/to/project/dist; location / { try_files $uri $uri/ /index.html; } }
其中,root
指定了靜態文件的路徑,location
中的配置指定了訪問靜態文件時的規則。
重啟 Nginx 服務器后,訪問項目即可看到正常的頁面。