Vue配置多页面

创建项目

$ vue create multi_pages

选择 Default ([Vue 2] babel, eslint)。

查看默认的项目目录：

$ tree -I "node_modules|dist"

├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock

默认项目是一个单页面应用。

多页面配置

在此项目中，我们需要额外配置一个单独登录页面。

模板配置

首先在模板目录创建登录模板：

public
├── favicon.ico
├── index.html
└── login.html

这里直接复制index.html，重命名为login.html。

源文件配置

在 src目录中创建pages目录，然后在pages目录中创建index目录和login目录，最后将原src目录中的文件App.vue和main.js分别拷贝至index目录和login目录，最终的目录结构如下：

src
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
└── pages
    ├── index
    │   ├── App.vue
    │   └── main.js
    └── login
        ├── App.vue
        └── main.js

项目配置

对文件目录改造完成后，最重要的一步是对项目配置进行修改，调整为多页面打包。

创建配置文件vue.config.js并配置：

module.exports = {
  pages: {
    index: {
      // index页面的入口
      entry: 'src/pages/index/main.js',
      // index页面模板来源
      template: 'public/index.html',
      // index页面最终打包在dist目录下输出文件名
      filename: 'index.html',
      // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'index'
    },
    login: {
      // login页面的入口
      entry: 'src/pages/login/main.js',
      // login页面模板来源
      template: 'public/login.html',
      // login页面最终打包在dist目录下输出文件名
      filename: 'login.html',
      title: 'login'
    }
  }
}

在配置文件中，分别对默认页面和登录页面的打包入口文件、模板页面以及打包后的输出文件进行配置，具体可参考配置项中的注释。

至此，Vue 项目的多页面配置已经完成，最终的目录结构如下：

├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── login.html
├── README.md
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── pages
│       ├── index
│       │   ├── App.vue
│       │   └── main.js
│       └── login
│           ├── App.vue
│           └── main.js
├── vue.config.js
└── yarn.lock