Vue Pages多入口项目与chainWebpack全局引用实践指南

Vue Pages 是 Vue CLI 3.x 中用于组织多入口项目的功能，它允许开发者在单个项目中管理多个独立的页面，每个页面都有自己的入口文件、模板和路由。在这个结构中，项目主要分为以下几个部分： 1. **依赖包**：`node_modules` 存放项目所依赖的所有第三方库和模块。 2. **Webpack 配置**：`build` 目录下包含 webpack 的配置文件，如 `vue.config.js`，它是 Vue CLI 项目的配置核心，用于定制构建过程，如模块打包、优化、加载器等。 3. **前端资源**： - `src` 目录下： - `components`：存放可复用的 Vue 组件。 - `pages`：每个页面的逻辑和视图分离，子目录如下： - `page1`：一个示例页面，包含 `components`、`router`（定义路由）、`views`（实际的 Vue 文件）以及 HTML 模板 (`page1.html`) 和 Vue 实现 (`page1.vue`)。 - `page2`：另一个页面，结构类似。 - `index`：通常代表项目的默认入口页，如果想让项目默认打开特定页面，`filename` 应设置为 `index.html`。 - `common`：放置公共方法或工具，可以复用在多个页面中。 - `store`：状态管理（如 Vuex）文件夹。 4. **其他配置文件**：`.gitignore` 用于忽略文件，`.env` 和 `.env.dev` 分别是全局和环境特定的配置，`.postcssrc.js` 和 `babel.config.js` 分别是 CSS 和 JavaScript 编译配置，`package.json` 是项目依赖管理和脚本执行的配置，`yarn.lock` 是 Yarn 依赖锁文件。 在 `vue.config.js` 中，`pages` 对象定义了每个页面的入口点、模板选择、输出文件名和标题，以及需要一起打包的 chunk（如 vendor 和 common）。这有助于实现按需加载，提升性能。每个页面有自己的入口文件（如 `main.js`），并指定公共的 chunks，这样当一个用户访问页面时，只有需要的组件和代码会被加载，从而达到高效的用户体验。 总结来说，Vue Pages 结合 chainWebpack 可以方便地管理项目中的多页面架构，通过合理的配置，使得项目结构清晰，代码可维护性提高，同时利用 Webpack 的能力实现代码分割和优化，确保项目的高效运行。