在稳定且广泛应用的 CentOS 7 服务器环境中搭建 Vue.js 前端开发框架，是许多后端工程师或全栈开发者进行项目实践的常见需求，Vue.js 依赖于 Node.js 运行时环境，因此整个安装过程的核心是正确配置 Node.js 及其包管理器 npm，随后再安装 Vue 的脚手架工具，本文将为您提供一份清晰、详尽的指南，助您在 CentOS 7 上顺利开启 Vue 开发之旅。
在开始之前，请确保您具备一个拥有 sudo 权限的非 root 用户账户，并且服务器已连接到互联网,这是执行安装命令和管理系统软件包的基础。
第一步：安装 Node.js 和 npm
CentOS 7 默认的软件源（YUM Repository）中的 Node.js 版本较为陈旧，可能无法满足现代 Vue.js 项目的兼容性要求，推荐使用 NodeSource 提供的官方源，它包含了最新的长期支持（LTS）版本。
访问 NodeSource 官网获取适用于您需求的版本的安装脚本，以安装 Node.js 18.x LTS 版本为例,执行以下命令来添加软件源：
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
该命令会下载并执行一个脚本，自动将 NodeSource 的仓库信息配置到您的系统中，脚本执行完毕后，您就可以使用 YUM 来安装 Node.js 了，安装 Node.js 时，npm（Node Package Manager）会作为依赖项被一并安装。
sudo yum install -y nodejs
安装过程可能需要几分钟时间，取决于您的网络速度，安装完成后，通过以下命令验证 Node.js 和 npm 是否已成功安装,并查看其版本号：
node -v npm -v
如果终端能够正确显示出版本信息（v18.18.0 和 8.1）,则说明第一步安装成功。
第二步：全局安装 Vue CLI
Vue CLI（Command Line Interface）是 Vue.js 官方的标准化开发工具，用于快速搭建项目脚手架、管理项目依赖和启动开发服务器，通过 npm 可以非常方便地进行全局安装。
在终端中执行以下命令：
sudo npm install -g @vue/cli
这里的 -g 参数代表“全局”（global），意味着 vue 命令将在系统的任何路径下可用，安装完成后,同样可以通过检查版本来确认：
vue --version
如果能看到类似 @vue/cli 5.0.8 这样的输出，即表示 Vue CLI 已准备就绪。
第三步：创建并运行您的第一个 Vue 项目
环境准备就绪后，接下来就可以创建一个 Vue 项目来验证整个流程。
创建项目：在您希望存放项目的目录下（
/home/username/projects），运行create命令，我们将项目命名为my-vue-app。vue create my-vue-app
执行后，Vue CLI 会提供一些交互式选项，例如选择预设（默认配置或手动选择特性），对于初学者，直接选择“Default”即可。
进入项目目录：项目创建完成后,进入该目录。
cd my-vue-app
启动开发服务器：运行以下命令来启动内置的开发服务器。
npm run serve
服务器启动后，终端会显示本地访问地址（通常是
http://localhost:8080/）和网络访问地址。
配置防火墙（重要）
由于 CentOS 7 默认启用了 firewalld 防火墙，外部请求可能无法访问到开发服务器的 8080 端口,您需要手动开放该端口。
sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent sudo firewall-cmd --reload
第一条命令永久地在 public 区域添加了 TCP 协议的 8080 端口，第二条命令重新加载防火墙配置使其生效，您就可以通过浏览器访问服务器的 IP 地址加端口号（http://<your_server_ip>:8080）来查看 Vue 的欢迎页面了。
为了方便查阅,以下小编总结了核心命令：
| 步骤 | 命令 | 描述 |
|---|---|---|
| 添加 NodeSource 源 | curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash - | 获取最新的 Node.js 软件源 |
| 安装 Node.js | sudo yum install -y nodejs | 安装 Node.js 和 npm |
| 安装 Vue CLI | sudo npm install -g @vue/cli | 全局安装 Vue 脚手架工具 |
| 创建 Vue 项目 | vue create my-vue-app | 初始化一个新的 Vue 项目 |
| 启动开发服务器 | npm run serve | 在项目目录内运行，启动本地开发环境 |
| 开放防火墙端口 | sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent | 允许外部访问 8080 端口 |
相关问答 (FAQs)
问题 1：为什么不直接使用 yum install nodejs 安装 Node.js？
解答： CentOS 7 官方软件源中的 Node.js 版本非常老旧（通常是 6.x 版本），而现代 Vue.js 项目（特别是 Vue 3）通常需要 Node.js 14.x 或更高版本，使用旧版本会导致依赖安装失败或遇到各种兼容性问题，通过添加 NodeSource 等第三方源，我们可以轻松获取并安装官方维护的最新 LTS 版本,确保开发环境的稳定性和先进性。
问题 2：如何更新已安装的 Vue CLI 或 Node.js 到最新版本？
解答：
- 更新 Vue CLI：由于 Vue CLI 是通过 npm 全局安装的，更新它非常简单，只需执行
sudo npm install -g @vue/cli@latest即可。@latest标签会确保您安装到 npm 仓库上发布的最新版本。 - 更新 Node.js：更新 Node.js 稍微复杂一些，您需要重新访问 NodeSource 官网，获取您想升级到的新版本的安装脚本（setup_20.x），然后像初次安装时一样执行它，脚本会自动处理旧版本的替换，执行完脚本后，运行
sudo yum update -y nodejs即可完成升级。
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
发表回复