Vue CLI3配置多页应用实战：源码结构与配置解析

本文主要探讨如何使用Vue CLI3配置一个多页应用，以便处理同时需要H5页面和Web页面的情况。在这种需求下，由于H5和Web页面存在共享代码但不采用响应式设计，因此需要创建两个独立的页面。Vue CLI3提供了一种方便的方式来实现这一目标，通过webpack配置实现多页面应用。 在Vue CLI3中，配置多页应用的关键在于`vue.config.js`文件中的`pages`属性。以下是一个示例配置： ```javascript pages: { index: { entry: 'src/index/main.js', // H5页面的入口文件 template: 'public/index.html', // H5页面的HTML模板 filename: 'index.html', // 编译后的H5页面名称 title: 'IndexPage', // HTML中的<title>标签内容 chunks: ['chunk-vendors', 'chunk-common', 'index'] // 包含的chunk文件 }, subpage: 'src/subpage/main.js' // Web页面的入口文件，模板和文件名将自动推导 } ``` 每个页面配置都是一个对象，包含`entry`（入口文件路径）、`template`（模板文件路径）、`filename`（编译后HTML文件名）、`title`（HTML中的标题）以及`chunks`（需要打包的chunk文件列表）。 在项目结构设计上，通常有两种常见的方法来组织多页应用的文件： 1. pages 文件夹：将每个页面的组件、样式和脚本放在名为`pages`的文件夹中，每个页面都有自己的子文件夹。 2. views 或其他命名的文件夹：类似地，使用`views`或其他自定义名称的文件夹来存放各个页面的资源。 例如，假设我们选择了`pages`方案，项目结构可能如下： ``` src/ ├── pages/ │ ├── index/ │ │ ├── main.js │ │ └── ... │ └── subpage/ │ ├── main.js │ └── ... ├── public/ │ ├── index.html │ └── subpage.html └── ... ``` 在这种结构下，`index`页面的入口文件是`src/pages/index/main.js`，而`subpage`页面的入口文件是`src/pages/subpage/main.js`。模板文件默认位于`public`目录下，可以根据需要进行调整。 通过这样的配置，Vue CLI3将根据`pages`配置自动生成多个HTML文件，并分别打包对应的入口文件，从而实现多页应用。这使得我们可以独立维护H5和Web页面，同时有效地复用共同的代码。 总结来说，Vue CLI3的多页应用实践主要涉及`vue.config.js`的`pages`配置、项目结构设计以及HTML模板的设置。正确配置后，可以轻松管理和构建针对不同设备或场景的独立页面，提高开发效率和代码组织的合理性。