全栈开发学习中
hzqaq
本教程旨在帮助开发者将本地开发完成的 Vue 前端项目，部署到生产环境的服务器上，使用户能够通过公网或内网 IP 正常访问。 整个部署流程分为以下几个核心步骤： 项目打包：使用 Vue 自带的构建工具，将源码编译为浏览器可直接识别的静态文件（HTML、CSS、JS 等），生成 dist 文件夹。 选择部署方式：根据你的服务器环境和运维习惯，选择合适的 Web 服务器软件。本教程主要介绍以下三种方案： 原生 Nginx：轻量、高性能，适合有一定 Linux 基础的用户手动配置。 宝塔面板：提供图形化界面，适合新手快速上手，通过可视化管理网站和配置文件。 1Panel：现代化的 Linux 运维面板，基于容器化理念，使用 OpenResty（Nginx 增强版）作为 Web 服务器。 配置 Web 服务器：将打包好的静态资源放置到服务器指定的站点目录下，并正确配置路由规则（特别是 Vue 的 history 模式需要配置伪静态，以解决刷新页面 404 的问题）。 启动/重载服务：使配置生效，完成最终部署。
hzqaq
Vue 3 + Vite 项目部署到 Nginx 子路径 `/qk/` 下。本地 `npm run dev` 一切正常，侧边栏正常显示；但 `npm run build` 打包上传到宝塔服务器后，侧边栏凭空消失，页面只剩主内容区。
hzqaq
Vue 3 + Vite 项目部署到 Nginx 服务器的子路径 `/qk/` 下，访问页面时出现白屏，浏览器控制台无明显 JS 报错。
hzqaq
本文是一份系统性的 Vue3 学习教程，主要面向有一定 Vue2 基础、希望转向 Vue3 的开发者。文章详细介绍了 Vue3 的诞生背景、性能提升、新特性，并重点围绕 Composition API 和工程化实践展开，提供了大量可直接运行的代码示例。