vue-cli3-pages:本想自己配置一个多页的开发配置给大家参考使用，看完源码后发现@ vuecli＃3.x已经自带了多页配置了。而且配置简单方便包你一学就会

Vue CLI 3.x 是 Vue.js 官方提供的一款强大的脚手架工具，它极大地简化了 Vue.js 应用的初始化和构建过程。在 Vue CLI 3 中，不仅支持单页面应用（SPA）的构建，还内置了对多页面应用（MPA）的支持，这使得开发者能够更高效地管理多个独立的入口页面。下面我们将详细讨论 Vue CLI 3 中如何配置和使用多页面应用。 1. **创建项目** 确保已经全局安装了 Vue CLI 3。如果还没有安装，可以通过以下命令进行安装： ``` npm install -g @vue/cli ``` 然后，创建一个新的 Vue 项目，并选择一个预设或者手动配置： ``` vue create my-project ``` 2. **配置多页面应用** 在项目根目录下，打开 `vue.config.js` 文件（如果没有，创建一个）。这个文件用于自定义 Vue CLI 的配置。在该文件中，我们可以配置 `pages` 属性来定义多个入口页面： ```javascript module.exports = { pages: { index: { entry: 'src/pages/index/main.js', // 入口文件 template: 'public/index.html', // 模板文件 filename: 'index.html', // 输出文件名 }, about: { entry: 'src/pages/about/main.js', template: 'public/about.html', filename: 'about.html', } } } ``` 在这个例子中，我们定义了两个页面：`index` 和 `about`，每个页面有自己的入口文件、模板文件和输出文件名。 3. **目录结构** 根据上面的配置，`src/pages` 目录下应有对应的子目录，例如 `src/pages/index` 和 `src/pages/about`，分别包含各自的 `main.js` 文件。同时，`public` 目录下应有对应的 HTML 模板文件。 4. **路由管理** 在多页面应用中，每个页面通常有自己的路由管理。你可以为每个页面设置独立的路由，或者在全局路由文件中根据页面名称动态配置。例如，在 `src/router/index.js` 中，你可以这样配置： ```javascript import Vue from 'vue' import Router from 'vue-router' const routes = [ { path: '/', component: () => import('@/pages/index') }, { path: '/about', component: () => import('@/pages/about') }, ] export default new Router({ routes }) ``` 5. **运行与构建** 现在，你可以通过以下命令启动开发服务器或构建项目： ``` npm run serve // 开发模式 npm run build // 生产模式 ``` Vue CLI 会根据 `vue.config.js` 中的配置自动处理多页面应用的构建。 6. **其他配置** 除了多页面配置外，Vue CLI 3 还提供了许多其他功能，如 CSS 预处理器支持、代码分割、热模块替换等。你可以根据项目需求在 `vue.config.js` 中进一步定制这些配置。 总结，Vue CLI 3 提供的多页面应用配置使得开发和管理多个入口页面变得简单。只需几步简单的配置，你就可以享受到高效开发的便利。对于想要学习和使用 Vue CLI 3 构建多页面应用的开发者来说，这是一个非常友好的特性。