【环境配置】Vue3项目离线化本地部署echarts全攻略

在企业内网、无网络服务器、本地化部署 等场景下，Vue3 项目无法依赖网络 CDN 或在线 npm 加载图表库，离线化部署依赖包成为刚需。

本文针对 Vue3 项目，详细讲解 ECharts 两种离线部署方案 （直接引入离线 JS、NPM 安装本地 TGZ 离线包），提供可直接运行的代码示例；同时整理 npm 安装、卸载、查看依赖 / 版本的常用指令，一站式解决前端离线部署与依赖管理问题。

方式一：直接引入 ECharts 静态 JS 文件（极简离线方案）

这是最直接的离线方式，无需 npm、无需打包工具 ，直接引入官方编译好的 echarts.min.js 静态文件，适合快速接入、单包使用的场景。

1. 下载 ECharts 离线 JS 文件

打开 ECharts 官方 CDN 地址，直接保存文件到本地：

复制代码

https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/

也可以从 ECharts 官网下载页获取对应版本的离线文件。

2. 放置文件到 Vue3 静态资源目录

Vue3 项目（Vite/Vue CLI 通用）的 public 目录是静态资源根目录 ，不会被编译打包，直接将下载好的 echarts.min.js 放入该目录：

你的项目根目录

└── public/

└── echarts.min.js # 放入离线JS文件

└── index.html

3. 全局引入离线 JS 文件

打开public 目录中的 index.html，在 <head> 标签内添加 script 标签引入离线文件：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Offline ECharts</title>
  <!-- 在head中引入离线ECharts -->
  <script src="./echarts.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

4. Vue3 组件中使用 ECharts

文件引入后，echarts 会挂载到全局 window 对象上，直接在组件中使用即可（Vue3 组合式 API + setup 语法糖）：

javascript 复制代码

<template>
  <!-- 图表容器 -->
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 获取DOM容器
const chartRef = ref(null)

// 页面挂载后初始化图表
onMounted(() => {
  // 直接使用 window.echarts 全局对象
  const myChart = window.echarts.init(chartRef.value)
  
  // 配置图表
  const option = {
    title: { text: 'Vue3 离线ECharts示例' },
    xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'bar' }]
  }
  
  myChart.setOption(option)
})
</script>

5. 优缺点

优点：操作极简、无依赖、无需 npm

缺点：仅适合单包使用，无法管理版本、无法按需引入、不兼容工程化依赖

方式二：NPM 安装本地 TGZ 离线包（工程化推荐）

这是 Vue3 工程化项目的标准离线方案 ，和在线 npm install 使用方式完全一致，支持版本管理、按需引入，适用于所有 npm 包（ECharts、Axios、Element Plus 等）。

核心原理：在联网环境下载依赖的 .tgz 压缩包 → 拷贝到内网项目 → 本地路径安装。

1. 联网环境下载 TGZ 离线包

找一台联网的电脑，安装 Node.js 后，打开终端执行命令下载对应包的离线压缩包：

bash 复制代码

# 语法：npm pack 包名
npm pack echarts

执行后会在当前目录生成离线包：echarts-5.4.3.tgz（版本号以实际下载为准）。

扩展：其他包也可以用此方式下载，如 npm pack axios、npm pack element-plus

另外，也可以直接到echarts依赖包的官方下载地址下载离线压缩包：

https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz

地址使用的是 npmmirror（淘宝镜像），速度更快且稳定

2. 本地项目放置 TGZ 包

在内网 Vue3 项目根目录，新建一个文件夹用于存放所有离线依赖包（方便管理）：

你的项目根目录

├── offline-packages/ # 新建离线包目录

│ └── echarts-5.4.3.tgz # 放入下载好的tgz包

├── public/

├── src/

└── package.json

3. 执行 NPM 命令安装离线包

在内网项目终端，执行本地路径安装命令，将离线包安装到项目依赖中：

bash 复制代码

# 语法：npm install ./离线包相对路径
npm install ./offline-packages/echarts-5.4.3.tgz

安装成功后，package.json 会自动记录依赖，和在线安装完全一致。

4. Vue3 组件中使用（与在线安装无差异）

安装完成后，支持 ES6 import 推荐写法 和 CommonJS require 写法，两种方式效果完全一致，可根据项目规范选择：

写法 1：import 导入（Vue3 官方推荐）

javascript 复制代码

<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// ES6 import 引入
import * as echarts from 'echarts'

const chartRef = ref(null)

onMounted(() => {
  const myChart = echarts.init(chartRef.value)
  const option = {
    title: { text: 'NPM离线包-ECharts示例' },
    xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'bar' }]
  }
  myChart.setOption(option)
})
</script>

写法 2：require 导入（补充案例）

require() 是 Node.js 通用的 CommonJS 导入语法，Vite / Vue CLI 均完美支持，适合老项目迁移或习惯 CommonJS 写法的场景：

javascript 复制代码

<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// CommonJS require 引入离线安装的 echarts
const echarts = require('echarts')

const chartRef = ref(null)

onMounted(() => {
  // 初始化和配置用法完全一致
  const myChart = echarts.init(chartRef.value)
  const option = {
    title: { text: 'require导入-ECharts示例' },
    xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'bar' }]
  }
  myChart.setOption(option)
})
</script>

关键说明：

1.import 和 require 导入的用法、功能完全相同，仅语法差异；

2.两种写法都仅适用于方式二（npm 安装 TGZ 离线包）；

3.方式一（直接引入 echarts.min.js）只能用 window.echarts，不支持 require/import。

5. 优缺点

优点：工程化兼容、支持版本管理、支持按需引入、适用于所有 npm 包、和在线开发无差异

缺点：需要提前下载 TGZ 包

必备：NPM 依赖管理常用指令

离线化部署离不开 npm 依赖管理，以下是最常用的核心指令，覆盖安装、卸载、查看依赖版本：

1. 安装依赖

bash 复制代码

# 1. 在线安装生产依赖（默认）
npm install 包名
# 简写
npm i 包名

# 2. 在线安装开发依赖（如打包工具、ESLint）
npm install 包名 --save-dev
# 简写
npm i 包名 -D

# 3. 本地安装离线TGZ包（本文核心）
npm install ./路径/包名.tgz

# 4. 安装指定版本
npm install 包名@版本号

2. 卸载依赖

bash 复制代码

# 卸载项目中的依赖包
npm uninstall 包名
# 示例：卸载echarts
npm uninstall echarts

3. 查看项目依赖包 & 版本号

bash 复制代码

# 1. 查看所有顶层依赖（最常用，无层级嵌套）
npm list --depth=0

# 2. 查看完整依赖树（包含子依赖）
npm list

# 3. 查看指定包的版本
npm list 包名
# 示例：查看echarts版本
npm list echarts

# 4. 查看本地Node/NPM版本
node -v
npm -v

4. 下载离线 TGZ 依赖包

用于在联网环境下载 npm 包的离线压缩包（.tgz 格式），拷贝到内网后可通过 npm install 本地安装：

bash 复制代码

# 1. 下载最新版本离线包
npm pack 包名
# 示例：下载最新版ECharts
npm pack echarts

# 2. 下载指定版本离线包（推荐，固定版本）
npm pack 包名@版本号
# 示例：下载 5.4.3 版本 ECharts
npm pack echarts@5.4.3

按照以上方案，即可完美实现 Vue3 项目中 ECharts 等第三方包的离线化部署！