如何在已有Web项目中离线使用Vue.js且不改动结构？

步骤1：初始化本地npm环境（未初始化时执行） #

在项目根目录打开终端，执行以下命令生成package.json来管理本地依赖：

npm init -y

步骤2：本地安装Vue.js #

执行命令安装指定版本的Vue（以Vue 3为例，如需Vue 2替换为vue@2.x.x）：

npm install vue@3.x.x

注：首次安装需联网，之后npm会将包缓存到本地，离线状态下重复安装或使用都无需网络。安装完成后，项目根目录会生成node_modules文件夹，包含Vue的完整文件。

步骤3：在现有HTML中引入本地Vue文件 #

无需依赖CDN，直接引用node_modules中的Vue文件，根据需求选择版本：

• 完整版（支持HTML内模板编译）：适合直接在HTML中写Vue模板的场景

  <script src="./node_modules/vue/dist/vue.js"></script>
  

• 运行时版（体积更小，无模板编译）：适合使用render函数或单文件组件的场景

  <script src="./node_modules/vue/dist/vue.runtime.js"></script>
  

注意：根据你的HTML文件所在路径调整相对路径，比如HTML在src/pages目录，路径需改为../node_modules/vue/dist/vue.js。

步骤4：离线开发的补充说明 #

• 提前安装依赖：如果需要Vue Router、Vuex等工具，在联网时执行npm install vue-router vuex，离线时这些依赖已存在于node_modules中，可直接引用。
• 静态资源本地化：确保项目中的CSS、图片、第三方JS等资源均为本地文件，避免引用在线链接。
• 可选优化：若担心node_modules变动影响引用，可将Vue核心文件复制到项目已有的静态资源目录（如static/js），之后引用该目录下的文件，无需改动原有项目结构。

内容的提问来源于stack exchange，提问作者code studio