怎么使用vue-cli3项目搭建多页面模式

发布时间：2021-11-22 09:31:40 作者：iii
来源：亿速云阅读：220

# 怎么使用Vue CLI 3项目搭建多页面模式

## 前言

在传统的Vue项目中，默认采用单页面应用（SPA）模式。但在实际开发中，我们可能需要构建多页面应用（MPA），例如企业官网、活动专题页等场景。本文将详细介绍如何基于Vue CLI 3配置多页面模式。

## 一、理解多页面模式

### 1.1 SPA与MPA的区别
- **SPA (Single Page Application)**
  - 整个应用只有一个HTML入口
  - 通过路由切换视图
  - 优点：用户体验流畅
  - 缺点：SEO不友好，首屏加载慢

- **MPA (Multi Page Application)**
  - 每个页面有独立的HTML文件
  - 页面跳转需要重新加载
  - 优点：SEO友好，适合内容型网站
  - 缺点：页面切换体验较差

### 1.2 Vue CLI的多页面支持
Vue CLI 3通过`pages`配置项支持多页面构建，每个页面需要：
1. 独立的入口文件（main.js）
2. 独立的HTML模板
3. 可选的独立路由配置

## 二、项目初始化

### 2.1 创建基础项目
```bash
vue create mpa-demo
cd mpa-demo

2.2 查看默认配置

Vue CLI 3的配置位于vue.config.js，初始项目可能没有该文件，需要手动创建：

// vue.config.js
module.exports = {
  // 配置项将在这里添加
}

三、配置多页面模式

3.1 基础目录结构

建议按以下方式组织代码：

src/
├── pages/               # 多页面目录
│   ├── home/            # 首页
│   │   ├── App.vue
│   │   ├── main.js      # 入口文件
│   │   └── router.js    # 路由配置（可选）
│   └── about/
│       ├── App.vue
│       ├── main.js
│       └── router.js
├── assets/              # 公共资源
└── components/          # 公共组件

3.2 修改vue.config.js

const path = require('path')

module.exports = {
  pages: {
    home: {
      // 入口文件
      entry: 'src/pages/home/main.js',
      // 模板文件
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html',
      // 页面标题
      title: '首页',
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/index.html',
      filename: 'about.html',
      title: '关于我们'
    }
  },
  // 修改输出目录
  outputDir: 'dist',
  // 静态资源目录
  assetsDir: 'static',
  // 是否使用hash文件名
  filenameHashing: true
}

3.3 配置HTML模板

修改public/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

四、开发环境配置

4.1 运行指定页面

# 开发首页
vue-cli-service serve --page home

# 开发关于页
vue-cli-service serve --page about

4.2 配置多页面热更新

在vue.config.js中添加：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /^\/home/, to: '/home.html' },
      { from: /^\/about/, to: '/about.html' }
    ]
  }
}

五、生产环境构建

5.1 构建所有页面

npm run build

将生成：

dist/
├── index.html       # 首页
├── about.html       # 关于页
└── static/          # 静态资源

5.2 按需构建页面

vue-cli-service build --page home

六、高级配置技巧

6.1 自动化配置多页面

对于大量页面的项目，可以动态生成配置：

const glob = require('glob')

function getPages() {
  const pages = {}
  glob.sync('./src/pages/**/main.js').forEach(filePath => {
    const name = filePath.split('/')[3]
    pages[name] = {
      entry: filePath,
      template: 'public/index.html',
      filename: `${name}.html`,
      title: `${name}页面`
    }
  })
  return pages
}

module.exports = {
  pages: getPages()
}

6.2 共享公共代码

在vue.config.js中配置：

configureWebpack: {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        common: {
          name: 'common',
          minChunks: 2,
          priority: -20
        }
      }
    }
  }
}

6.3 处理静态资源路径

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-project-name/'
    : '/'
}

七、常见问题解决

7.1 页面间跳转问题

使用<a>标签而非<router-link>：

<a href="/about.html">跳转到关于页</a>

7.2 404页面处理

在服务器配置重定向规则：

location / {
  try_files $uri $uri/ /index.html;
}

7.3 页面间共享状态

建议方案： 1. 使用localStorage/sessionStorage 2. 通过URL参数传递 3. 使用全局事件总线

八、总结

通过Vue CLI 3配置多页面模式，我们可以： 1. 保留Vue的开发体验 2. 获得更好的SEO支持 3. 实现更灵活的页面组织 4. 保持构建工具的现代化特性

虽然多页面应用在体验上不如SPA流畅，但对于特定场景（如营销页面、内容网站）是非常合适的选择。

提示：本文示例代码已上传至GitHub仓库 vue-cli3-mpa-demo “`

这篇文章共计约1600字，包含了从基础配置到高级技巧的完整内容，采用Markdown格式编写，可直接用于技术博客发布。