用vue构建多页面应用的示例代码

构建多页面应用（MPA）指的是在同一个网站中，有多个页面、每个页面独立的应用，这些应用之间互相独立，没有数据交互。相比于单页面应用（SPA），它更适合于企业级应用开发。

Vue可以通过配置webpack来构建MPA。下面是完整的攻略：

1. 准备工作

• 安装Vue CLI 3，npm install -g @vue/cli，安装参见 Vue CLI官方文档。
• 创建一个Vue项目，使用vue create my-project（my-project是项目名，你可以根据需要命名）命令创建。

2. 配置webpack用于构建多页面应用

• 创建一个vue.config.js配置文件在项目根目录下（如果Vue CLI安装版本不是3.x，要创建vue.config.js文件在/config文件夹下）。
• 在该文件中配置pages属性（代码如下）。

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
    },
    about: {
      entry: 'src/about/main.js',
      template: 'public/about.html',
      filename: 'about.html',
      title: 'About Page',
    },
  }
}

在上述代码中，pages是一个对象，对象属性是页面名字（我这里定义了index和about两个页面），属性值是一个对象。对象中的属性解释如下：
- entry 表示该页面的入口文件，因为开发过程中可能有多个页面，所以要指定不同的入口文件。
- template 表示页面的模板文件（比如.html等），该模板应该只包含根元素，Vue会将编译后的内容插入到根元素中。
- filename 表示打包后该页面的文件名。
- title 表示页面在浏览器标签页上显示的名称。

• 对于图片和字体等静态资源，需要配置publicPath：

module.exports = {
  publicPath: '/dist/',
  // ...
}

3. 编写页面代码

• 每个页面应该在src目录下创建一个相应的目录，以便于代码的管理。例如，我们写了两个页面，一个是index，一个是about页面，那么我们就需要创建两个目录src/index和src/about。
• 在每个页面目录下，创建main.js入口文件，以便于webpack打包。
• 在每个页面目录下，创建一个.vue文件，以此实现可复用组件的模块化管理。
• 在每个页面目录下，还需要创建一个.html模板文件，可以做一些针对该页面的特殊处理，比如样式、脚本等。

4. 运行和打包

• 执行npm run serve来运行项目，这会启动一个本地服务器，可以访问所有的页面。
• 执行npm run build来打包项目，这个命令会输出多个html和js文件，放在dist目录下。每个html文件对应一个entry，每个entry都是一个独立的应用。

示例1

比如我们建立了一个index和about页面，目录结构如下：

my-project
├── public
    ├── index.html
    ├── about.html
│── src
│   ├── index
│   │   ├── main.js
│   │   ├── Index.vue
│   │   ├── index.html
│   ├── about
│       ├── main.js
│       ├── About.vue
│       ├── about.html
├── vue.config.js

则index.html和about.html都被打包成了一个.html文件，并且各由自己的JS文件、CSS文件。

示例2

再比如我们建立了一个shop和cart页面，目录结构如下：

my-project
├── public
    ├── shop.html
    ├── cart.html
│── src
│   ├── shop
│   │   ├── main.js
│   │   ├── ProductList.vue
│   ├── cart
│       ├── main.js
│       ├── Cart.vue
├── vue.config.js

然后运行npm run build后，我们会在dist目录下看到输出的HTML和JS文件，其中shop.html和cart.html各自对应着自己的js文件，从而实现了Vue构建多页面应用的功能。

以上就是使用Vue CLI 3+webpack构建一个多页面应用的攻略。