怎么离线下载 jQuery、Vue 等常用 JS 库文件

离线下载 JavaScript 库文件的核心，是获取可以直接通过 <script src="..."> 标签或本地构建加载的完整 .js 独立文件，并将其存储在本地或企业内网服务器中。获取这些单文件通常有三条标准途径：利用公共 CDN 镜像检索另存、从官方网站及 GitHub Release 提取发行包、以及利用联网电脑上的 npm 命令行导出依赖包。理解这三种获取方式及对应库的构建版本差异，能够确保在断网、内部机房或合规审查等开发环境中准确完成依赖部署。

方法一：通过公共 CDN 镜像直接下载单文件

对于只需通过页面标签引入的库（如传统 jQuery 项目，或直接在单 HTML 页面中通过全局对象使用的 Vue），最快速的方式是通过公共 CDN 获取。公共 CDN 服务会为 npm 上的每一个发布包提供在线文件浏览与下载。

1. 常用 CDN 服务与地址规范

常用的开放 CDN 均遵循明确的 URL 格式规则。只要掌握库名和版本号，就能拼出精确的文件下载地址：

• unpkg：直接镜像 npm 包的文件结构。格式为 https://unpkg.com/<package>@<version>/<file-path>。
• cdnjs：托管主流通用前端库。格式为 https://cdnjs.cloudflare.com/ajax/libs/<library>/<version>/<file>。
• jsDelivr：同时支持 npm 和 GitHub 仓库。格式为 https://cdn.jsdelivr.net/npm/<package>@<version>/<file-path>。

2. 具体下载步骤示例

以常用库的具体版本为例，通过浏览器或命令行直接下载保存：

如果使用终端或脚本批量拉取，可以直接在可联网电脑上运行 curl 命令输出到指定本地文件：

# 示例：通过 curl 命令直接将远程 CDN 库另存到本地目录
curl -o jquery-3.7.1.min.js https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
curl -o vue.global.prod.js https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js

# 同时下载源码映射文件（Source Map），防止浏览器在离线控制台报 404 警告
curl -o jquery-3.7.1.min.map https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.map

方法二：从官方网站与 GitHub Release 归档下载

如果需要更严谨的官方签名、附带的单元测试、TypeScript 类型定义文档或特定旧版本，直接访问官方站点与 GitHub 发布页面是推荐的方式。

1. jQuery 官方直接下载

jQuery 官方在其主站长期提供独立的构建版本下载：

• 访问官网下载页：https://jquery.com/download/
• 页面明确提供了两类构建版本：
  • Download the compressed, production jQuery（生产压缩版，体积小，去除注释与空白符）。
  • Download the uncompressed, development jQuery（开发未压缩版，保留代码结构与变量名，适合本地排错与断点）。
• 直接点击对应链接即可下载 jquery-x.x.x.js 文件。

2. Vue 官方仓库 Release 下载

Vue.js 并不像传统库一样在主页直接放置下载按钮，但它的每一个正式版本都会在 GitHub Releases 页面打包归档：

• 访问 Vue 3 仓库发布页：https://github.com/vuejs/core/releases
• 在 Release 列表找到目标版本标签（例如 v3.4.21），展开“Assets”区域。
• 下载名为 vue-x.x.x.zip 或 Source code (zip) 的归档包。
• 解压后进入 packages/vue/dist/ 目录，所有可独立运行的 JS 库文件都在该文件夹内。

核心辨析：Vue 3 各种 dist 文件的选型策略

下载 Vue 3 的离线包后，通常会看到 vue.global.js、vue.runtime.global.js、vue.esm-browser.js 等多种不同命名的文件。如果不清楚它们的差异，盲目引入可能导致页面白屏或报“template compiler is not supported”错误。

对于在离线 HTML 中直接通过常规 <script src="vue.global.prod.js"></script> 引入并挂载容器节点（如 <div id="app">{{ message }}</div>）的场景，必须选用 vue.global.prod.js 或 vue.global.js，因为它们内置了模板编译器，能直接解析 DOM 中的模板语法。

方法三：使用 npm 工具链离线打包与提取

如果开发团队在内网有部分前端工程化构建工具（如 Vite, Webpack），或者需要一次性导出完整的 npm 依赖包结构，可以使用官方提供的 npm pack 命令。

1. 使用 npm pack 打包依赖

在一台可以正常访问公网的开发机上打开终端，执行以下命令：

# 导出指定版本的压缩包归档（.tgz 格式）
npm pack jquery@3.7.1
# 终端输出类似于：jquery-3.7.1.tgz

npm pack vue@3.4.21
# 终端输出类似于：vue-3.4.21.tgz

2. 解压与提取所需文件

生成的 .tgz 文件实际上是标准的 tar+gzip 压缩包。解压后会得到一个标准的 package 目录：

• 解压命令：tar -zxvf vue-3.4.21.tgz（Windows 环境可用 WinRAR、7-Zip 直接解压）。
• 进入解压出的 package/dist/ 目录。
• 在该目录下即可找到 vue.global.prod.js、vue.runtime.global.prod.js 等完整产物，将其拷贝到目标离线项目的静态资源目录下即可。

本地离线项目组织与引入验证

下载好离线 JS 文件后，将其合理地归档到工程中并正确引入，是确保离线页面稳定运行的关键步骤。

1. 推荐的目录组织结构

建议将外部三方依赖与业务自写代码清晰分离，建立专用的 vendor 或 libs 目录：

my-project/
├── index.html
├── css/
│   └── style.css
└── js/
    ├── libs/
    │   ├── jquery-3.7.1.min.js
    │   ├── jquery-3.7.1.min.map
    │   └── vue.global.prod.js
    └── app.js (业务逻辑代码)

2. 编写本地 HTML 进行验证

在 index.html 中使用相对路径引入上述离线文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>本地离线引入测试</title>
  <!-- 引入本地离线 jQuery -->
  <script src="js/libs/jquery-3.7.1.min.js"></script>
  <!-- 引入本地离线 Vue 3 -->
  <script src="js/libs/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ greeting }}</h1>
    <button id="test-btn">jQuery 事件测试</button>
  </div>

  <script>
    // 验证 jQuery 离线是否正常加载
    $(function() {
      console.log("jQuery 离线版本加载成功，版本号:", $.fn.jquery);
      $("#test-btn").on("click", function() {
        alert("jQuery 事件触发成功！");
      });
    });

    // 验证 Vue 3 离线是否正常挂载
    const { createApp, ref } = Vue;
    createApp({
      setup() {
        const greeting = ref("Vue 3 离线库运行正常！");
        return { greeting };
      }
    }).mount("#app");
  </script>
</body>
</html>

离线使用的注意事项与常见问题

• SRI（子资源完整性校验）标签属性清理：如果在联网阶段拷贝的是带有 integrity="sha384-..." 属性的 script 标签，在本地修改或重新下载不同小版本后，必须删除该属性或更新对应的 hash 值，否则浏览器会因完整性校验失败直接拦截执行。
• SourceMap 警告处理：生产压缩版的 .min.js 文件末尾通常有一行注释形如 //# sourceMappingURL=xxx.min.map。在离线环境下，浏览器开发者工具打开时会尝试在同级目录下请求该 .map 文件。如果不希望控制台报出 404 黄色警告，可一并将 .map 文件下载到同级目录，或者直接用文本编辑器删除该行注释。
• 本地服务协议优于 file:// 协议：部分现代前端特性（如 ES Module <script type="module">）在直接双击用 file:/// 协议打开时会被浏览器的 CORS 策略限制。建议在离线环境中使用轻量 HTTP 服务器（如 Python 的 python -m http.server 8080 或 Node.js 的 http-server）来访问页面。