返回

Vue项目 CPanel 修改不显示?一文搞定!

vue.js

Vue 项目更改未在 CPanel 网站上显示

当 Vue 项目部署到 CPanel 上后,直接修改 .vue 文件,变动却未在网站上实时反映,这是一个常见问题。直接编辑 CPanel 文件管理器内的文件,并不能直接更新线上项目,因为 Vue 代码需要经过构建过程才能转化为浏览器可解析的代码。通常,这个构建过程是通过 npm run build 命令实现的,但这个操作可能会在 CPanel 环境下遇到限制,尤其是在 Node.js 版本或相关依赖不匹配时。

问题根源分析

问题的核心在于,Vue 项目代码是开发阶段的源码,需要经过诸如 npm run build 的编译打包过程,生成最终的静态资源,例如 HTML、JavaScript 和 CSS 文件。 这些静态文件才是浏览器实际加载和呈现的内容。 直接修改 .vue 文件相当于仅仅修改了“源代码”,没有重新进行构建生成线上资源。

具体来说,可能存在以下几种原因:

  • 直接编辑未构建的源文件: CPanel 文件管理器里看到的是 Vue 项目的源码,不是最终浏览器要加载的文件。修改源码后,必须经过构建,变动才会反映到网页上。
  • CPanel 环境限制: npm run build 命令依赖 Node.js 和 npm,这些工具的版本或可用性可能在 CPanel 环境中受到限制,比如版本过低、权限不足、缺少依赖等。
  • 文件上传覆盖不完全: 当在本地构建后重新上传,如果操作不当,可能覆盖不完全,或者导致缓存问题。

解决方案

针对这些问题,可以考虑以下几种解决方案:

1. 本地开发、构建后上传

这是一个常规的做法。开发者先在本地搭建开发环境,修改和测试完成后再进行构建,随后上传至 CPanel。

步骤:

  1. 本地安装 Node.js 和 npm: 确保本地计算机已经安装了兼容的 Node.js 版本和 npm。可以从 https://nodejs.org 下载并安装。
  2. 获取项目代码: 从 CPanel 下载整个 Vue 项目目录到本地。
  3. 安装依赖: 在本地项目的根目录中,使用 npm installyarn install 命令安装所有依赖包。
  4. 修改 Vue 文件: 使用文本编辑器或 IDE 修改需要修改的 .vue 文件。
  5. 本地构建: 执行 npm run build 命令。通常,构建后的静态资源会在 dist 文件夹中生成。
  6. 上传至 CPanel:dist 文件夹内的所有内容(或者根据 vue.config.js 里设定的 outputDir),通过 CPanel 文件管理器或 FTP 上传到网站的相应目录,替换原有的静态资源。 确保目标目录结构正确。

注意: 这种方式适合整体改动,或者需要反复调整的时候。 在生产环境更新的时候,推荐考虑其他热更新方案。

2. 检查 CPanel Node.js 环境

如果希望直接在 CPanel 环境中运行 npm run build,需要确保 CPanel 中 Node.js 版本以及相关环境符合要求。
例如之前提到的错误 “node: /lib64/libc.so.6: version 'GLIBC_2.16' not found (required by node)”, 就意味着系统glibc版本不兼容你的node 版本. 如果cpanel支持指定node 版本,修改或升级为兼容的版本。

步骤:

  1. 检查 Node.js 版本: 在 CPanel 终端中运行 node -vnpm -v 查看当前使用的版本, 确定版本是否过低或者不匹配。
  2. 更新 Node.js (如果可行): 部分 CPanel 服务商可能提供界面操作来管理 Node.js 版本,如果支持,选择匹配的版本。
  3. 修复依赖: 如果确定了Node.js环境支持, 可以尝试执行 npm rebuild 清除本地缓存和node 二进制依赖。 确保依赖包与node 环境匹配。
  4. 尝试构建: 在确保环境匹配后,再次尝试运行npm run build命令。

警告: 随意修改Cpanel 内环境可能会导致服务器不稳定。修改前请务必咨询 CPanel 服务商或者做好备份。

3. 使用构建工具(例如 GitHub Actions 或 Jenkins)

更专业的方法是使用持续集成和持续部署(CI/CD)工具, 例如GitHub Actions。 这些工具可以帮助你实现代码修改,自动构建、并部署到服务器。

步骤:

  1. 将代码托管至仓库: 将Vue项目托管到如 GitHub、 GitLab 代码托管平台。

  2. 配置构建脚本: 在代码库中创建 构建配置文件( 例如: GitHub Action 工作流文件 .github/workflows/main.yml). 在脚本中,设定执行步骤, 包括 代码检出, 依赖安装,项目构建, 并通过ftp 或者rsync等工具上传构建产物至服务器。

  3. 触发构建流程: 修改代码, push 代码到仓库时触发构建, 并部署至CPanel.

示例 GitHub Actions 配置 (.github/workflows/main.yml):

name: Deploy to CPanel
on:
  push:
    branches:
      - main # 根据需要修改触发分支
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'  # 可以修改为你需要的 Node.js 版本
      - name: Install Dependencies
        run: npm install
      - name: Build Project
        run: npm run build
      - name: Deploy to CPanel
        uses: easingthemes/ssh-deploy@v2.2.2
        env:
            SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
            ARGS: "-az -v"  
            SOURCE: "dist/" #构建后的输出目录
            REMOTE_HOST: ${{ secrets.REMOTE_HOST }}  #替换为你的cpanel 服务器IP 或 域名
            REMOTE_USER: ${{ secrets.REMOTE_USER }}  #替换为你的cpanel 用户名
            TARGET: "/home/${{ secrets.REMOTE_USER }}/public_html/" # 替换为你的网站目录
            

注意: 请将对应的cpanel ssh key 存储在GitHub secret. 请阅读 easingthemes/ssh-deploy 文档 以获取更多配置细节。

这种方式提供了一种更加可靠、自动化、可维护的发布方案。

其他注意事项:

  1. 浏览器缓存: 构建后,即使服务器上已经更新了,部分用户的浏览器也可能仍然显示旧版本的内容,这是因为浏览器缓存了旧的静态资源。 通常使用浏览器的 “强制刷新”(Control/Command+Shift+R)或清空浏览器缓存,或者在 HTTP Header 中设置 cache-control: no-cache 可以解决。
  2. 备份: 在进行任何操作前,备份重要的文件是重要的步骤。 尤其是生产环境更新时。
  3. 代码版本管理: 采用类似Git代码管理,以便追踪版本历史、轻松回滚, 以及团队合作。

使用上述任何一种方式进行修改和部署前, 都要进行详细的测试以确保变动正确、稳定地应用于生产环境。 仔细选择符合项目特点的方法才是关键。