如何在Yii2 Advanced中正确集成Vue3（WebPack/Mix/Vite）及部署位置咨询

两种方案的对比与分析 #

1. @frontend、@backend 分别安装配置 #

• 优势：
  • 前后端前端资源完全隔离，依赖、Webpack配置、Vue源码可独立维护，适合前后端业务差异大的场景（比如前端用特定Vue插件，后端无需引入）。
  • 各自打包互不影响，一端构建出错不会波及另一端。
• 劣势：
  • 依赖重复安装（如Vue3核心包会在两个目录存在），增加项目体积。
  • 相同Webpack配置需重复编写，后续修改要同步更新两处，维护成本高。

2. 根目录统一安装配置 #

• 优势：
  • 依赖统一管理，仅需安装一次Vue3、Webpack及相关插件，节省存储空间，也便于统一版本升级。
  • 可复用基础Webpack配置，仅针对前后端差异编写拆分配置（如入口文件、输出目录），维护效率更高。
  • 可在根目录创建共享文件夹存放公共组件、工具函数，供前后端源码直接复用，避免代码冗余。
• 劣势：
  • 前后端资源构建相互关联，共用配置出问题可能同时影响两端，需要更严谨的配置拆分逻辑。
  • 若前后端对依赖版本有不同需求（如前端用最新版Vue3，后端需稳定旧版本），该方案不适用。

推荐方案 #

如果前后端业务关联度较高、有可复用的前端组件或工具，优先选择根目录统一安装配置，具体可按以下结构搭建：

• 根目录创建frontend-src和backend-src文件夹，分别存放前后端的Vue业务源码。
• 根目录下安装所有依赖，编写基础Webpack配置文件，再创建webpack.frontend.js和webpack.backend.js继承基础配置，指定各自的入口路径与输出目录（比如输出到@frontend/web/assets和@backend/web/assets）。
• 根目录新增shared文件夹，存放公共组件、工具函数，供前后端源码引入使用。

若前后端业务完全独立、无复用资源需求，或需要彻底隔离依赖环境，再考虑前后端分别安装配置。

内容的提问来源于stack exchange，提问作者Roman Dukhanin