前言
在前端项目开发中，很多时候我们都需要构建多页面（Multipages）应用。这些应用中的每一个页面都是单独的 HTML 文件，并且它们之间没有像单页应用那样的路由机制。
Vue CLI 是一个很好的前端脚手架工具，它可以帮助我们快速构建 Vue 项目，但默认情况下只支持单页应用。如果您需要构建多页面应用，可以使用 npm 包 vue-cli-plugin-multipages。
本文将介绍如何使用 vue-cli-plugin-multipages 来构建多页面应用。
安装和配置
首先，您需要安装 Vue CLI （如果您还没有安装的话）：
npm install -g @vue/cli
接下来，您需要在项目中安装 vue-cli-plugin-multipages：
vue add multipages
安装过程中，您需要回答一些问题，例如要添加哪些页面、每个页面的入口文件名、生成的 HTML 文件的输出路径等。
安装完成后，在您的项目中将会生成一个 pages 目录，其中包含每个页面的入口文件和对应的 HTML 文件。同时，Vue CLI 也会为您自动生成一个 webpack 配置文件，以支持多页面应用。
需要注意的是，如果您在安装过程中选择了不生成 HTML 文件，那么您需要自己手动创建。并且，您还需要在 webpack 配置文件中进行相应的配置，以告诉 webpack 如何处理这些 HTML 文件。
示例代码
下面是一个示例代码，这是一个使用 vue-cli-plugin-multipages 构建的简单的多页面应用。
首页（index.js）
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')首页（index.html）
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------- ------- ------ ---- --------------- ------- -------
产品页（product.js）
import Vue from 'vue'
import Product from './Product.vue'
new Vue({
render: h => h(Product),
}).$mount('#product')产品页（product.html）
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------ ------- ------ ---- ------------------- ------- -------
商品页（goods.js）
import Vue from 'vue'
import Goods from './Goods.vue'
new Vue({
render: h => h(Goods),
}).$mount('#goods')商品页（goods.html）
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------ ------- ------ ---- ----------------- ------- -------
结论
Vue CLI 和 vue-cli-plugin-multipages 可以帮助您快速构建多页面应用。只需要简单的安装和配置即可生成多个入口文件和对应的 HTML 文件，适合开发多页应用的需求。
同时，如果您需要进一步优化您的多页面应用，也可以通过配置 webpack 来实现更加高级的功能，例如代码分割、异步加载等。
综上所述，vue-cli-plugin-multipages 是一个很好的工具，它可以让您更加专注于开发多页面应用的业务逻辑，而无需过多关注配置和构建等底层细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6251ab1864dac67388