DEV Community
·
记一次成功的nginx部署vue
💡
原文中文，约5600字，阅读约需14分钟。
📝
内容提要
本文介绍了在宝塔面板上部署Vue项目的步骤，包括添加站点、安装Nginx、配置SSL证书和Nginx设置。使用Vite配置Vue3项目，确保路由模式正确。最后，将构建文件上传至域名目录，重载Nginx配置，确保通过HTTPS访问以解决404和白屏问题。
🎯
关键要点
- 在宝塔面板上添加站点，选择传统网站并输入域名。
- 安装Nginx并编辑配置文件，确保启用SSL证书。
- 配置Nginx的server块，包括SSL证书路径和静态资源缓存设置。
- 使用Vite配置Vue3项目，设置基础路径和代理。
- 确认Vue路由模式，确保Nginx支持history模式。
- 将构建文件上传至域名目录，确保文件结构正确。
- 重载Nginx配置并重启服务，以确保通过HTTPS访问，解决404和白屏问题。
❓
延伸问答
如何在宝塔面板上添加Vue项目的站点？
在宝塔面板中，点击【网站】然后选择【添加站点】，输入域名并选择【传统网站】。
部署Vue项目时如何安装和配置Nginx？
在宝塔面板的【软件商店】中安装Nginx，编辑配置文件以启用SSL证书，并设置server块。
如何确保Vue项目的路由模式正确？
确认Vue项目的路由模式为history模式，并在Nginx配置中添加相应的location设置。
如何上传构建文件到域名目录？
在宝塔面板中选择【文件】，在域名目录下上传dist目录中的所有文件，确保文件结构正确。
重载Nginx配置后需要做什么？
重启Nginx服务，以确保通过HTTPS访问并解决404和白屏问题。
使用Vite配置Vue3项目时需要注意什么？
设置基础路径和代理，并确保关闭生成map文件，指定打包输出目录为dist。
➡️
