详解vue-cli3多页应用改造

在现代前端开发中，Vue.js作为一个流行的JavaScript框架，已经被广泛地应用于构建交互式的Web界面。随着项目规模的增长，一个平台可能会包含多个独立的应用（也称为子应用），这就催生了多页应用（Multi-Page Application，MPA）的需求。本文将详细介绍如何使用Vue CLI 3（一个基于Vue.js的命令行界面）来构建和改造一个多页应用。 ### 多页应用改造的背景与需求 在多页应用的场景中，平台P需要整合产品a、b、c、d、e等多个独立的单页应用（Single Page Application，SPA）。这些产品在UI样式风格上需要保持统一，同时会用到一系列的公共配置、组件和方法。例如，公共配置可能包括基础配置如API的HOST、是否需要添加埋点JavaScript；公共组件可以是头部导航、表格、搜索框等；公共方法则可能是请求拦截和生成UUID的函数。 在当前的维护现状中，由于历史遗留问题，每个产品都是独立的SPA，并且各自拥有自己的配置和组件，尽管样式上大致保持了一致，但细节上的不一致性比如面包屑的左边距不统一（有的是5px、有的是8px），导致维护成本高且容易出错。此外，项目间所依赖的包版本不一致，有的项目使用的是vue-cli2，有的则是vue-cli3，增加了维护的复杂度。 ### 多页应用改造的目标 改造的目标是将各个产品单页应用整合为多页应用，提取公共文件（如主题样式、配置、组件和方法），以此减少规范性东西的维护成本，并提升开发和维护的效率。 ### 目录结构的对比 改造前，项目结构比较分散，每个产品都有自己的入口文件和静态资源目录。比如，平台首页的静态资源在`portal-page`目录下，而产品a的在`label`目录下。改造后，所有的产品页面都汇总到了统一的目录下，形成了清晰的目录结构。静态资源统一放到`dist`目录下，各个产品页面文件如`label.html`、`metric.html`等都清晰地列在其中。 ### 实现多页应用的关键 在Vue CLI 3中实现多页应用，关键在于配置`vue.config.js`文件。该文件中包含`pages`配置项，每个页面可以单独配置其入口文件（`entry`）、模板（`template`）、输出文件名（`filename`）等。在官方文档中给出了相应的配置示例，其中，`entry`是页面的入口文件路径，`template`是指定模板文件的路径，而`filename`则指定了输出文件的路径和名称。对于需要配置页面标题的，可以添加`title`字段，并确保`template`中的`title`标签使用了`<%=htmlWebpackPlugin.options.title%>`的插值表达式。 ### 创建新项目及配置步骤 在创建新项目时，首先需要选择需要的插件，如Babel、Router、Vuex、eslint等。然后，按照官方文档的步骤进行项目的创建。创建完成后，需要对`vue.config.js`文件进行修改，增加`pages`配置。对于一些静态资源，如`favicon.ico`和`index.html`，需要在项目根目录下新建`public`文件夹，并包含这些文件。`index.html`文件内容需要符合HTML的基本结构，并包含一些基础的元数据。 ### 注意事项 文章中提到的内容是通过OCR扫描得到的，可能因为技术原因，导致了个别字的识别错误或者漏识别，需要读者自行理解并修正以保证语义通顺。 总结来说，通过Vue CLI 3实现多页应用改造，不仅可以提升项目的可维护性，还可以通过统一的配置和组件管理，降低重复开发的成本。这对于大型的项目来说，是一个有效且提高效率的解决方案。