在 IntelliJ IDEA 中打包 Vue 项目，核心是通过集成的终端（Terminal）执行 Vue CLI 提供的构建命令，将源代码编译、压缩并输出到指定目录。整个过程依赖于 Node.js 环境、npm 或 yarn 包管理器以及项目的 package.json 配置文件 。

一、打包前环境与项目准备

在打包之前，需确保开发环境已正确配置。

1. Node.js 与 npm：确保系统已安装 Node.js（自带 npm）。可在 IDEA 终端中验证：

   node -v
   npm -v
   

2. 项目依赖：确保所有项目依赖已安装。通常在项目根目录的 node_modules 文件夹中 。若未安装或不确定，应在项目根目录下执行：

   npm install
   

   此命令会根据 package.json 文件安装所有依赖项 。

二、核心打包命令与执行步骤

Vue CLI 项目的打包命令已在 package.json 的 scripts 字段中预定义，通常为 build。

执行 npm run build 后，Vue CLI 默认会在项目根目录下生成一个 dist 文件夹，其中包含了所有已压缩、优化并准备好用于生产环境的静态文件（HTML, CSS, JS, 图片等）。

三、打包配置与常见调整

通常直接使用 npm run build 即可，但根据项目需求，可能需要进行一些配置调整。

1. 修改输出目录：默认输出到 dist 目录。可以通过在项目根目录创建或修改 vue.config.js 文件来改变输出路径 。

   // vue.config.js
   module.exports = {
     // 将构建输出目录改为 'output'
     outputDir: 'output'
   }
   

2. 配置公共路径（Public Path）：如果项目需要部署在子路径下（如 http://domain.com/my-app/），需要配置 publicPath 。

   // vue.config.js
   module.exports = {
     publicPath: process.env.NODE_ENV === 'production'
       ? '/my-app/' // 生产环境子路径
       : '/' // 开发环境根路径
   }
   

3. 环境变量与模式：Vue CLI 支持通过 .env 文件设置环境变量，并对应不同的构建模式（如 production, development）。打包生产版本时，会自动使用生产模式下的变量和优化。

四、在IDEA中配置一键打包（可选）

为了提高效率，可以在 IDEA 中配置一个“运行配置”（Run Configuration），实现一键打包。

1. 点击 IDEA 右上角运行配置下拉菜单，选择 Edit Configurations...。
2. 点击 + 号，添加一个 npm 类型的配置。
3. 在配置窗口中：
   • Name: 可命名为 “Build Vue” 或 “打包”。
   • Package.json: 确保指向项目根目录的 package.json 文件。
   • Command: 选择 run。
   • Scripts: 选择 build。
4. 点击 OK 保存。之后就可以通过点击运行按钮直接执行打包，无需手动输入命令 。

五、打包后的处理与部署

打包生成的 dist 目录中的内容为纯静态资源，部署方式灵活：

• 传统Web服务器：将 dist 文件夹内的全部内容上传至 Nginx、Apache、IIS 等 Web 服务器的网站根目录或指定目录即可 。
• 结合后端服务：在前后端分离的 Spring Boot 项目中，可以将 dist 内容复制到 Spring Boot 项目的 src/main/resources/static 目录下，然后打包成统一的 Jar 或 War 包进行部署 。
• 检查打包结果：在部署前，可以本地预览打包结果。安装 serve 工具后，在 dist 目录下执行 serve -s .，即可在浏览器中查看生产环境构建效果。

参考来源

• vue 学习笔记 - 1、创建第一个项目 idea
• Intellij Vue开发配置
• IDEA使用内容汇总
• 使用idea搭建一个vue起始项目（详细）
• Windows下vue环境搭建及第一个项目
• JAVA项目部署