vue-cli多页面配置（vue2.0）

目录

概述

多页面的配置

步骤1：编写配置文件 vue.config.js

步骤2：在src目录下创建目录pages

步骤3：创建HTML文件（主组件挂载点）

测试

完毕，总结

---

概述

我们知道使用vue脚手架vue-cli创建的项目默认是SPA（单页面应用），但是许多场景单页面应用并不能满足我们的需求。

对于vue-cli创建的项目配置多页面应用，最近有需求，但是很久没有配置了有点生疏，百度了一下，许多文章对于我来说篇幅过于长且繁琐，所以自己总结一下简单配置多页面应用的步骤。

多页面的配置

 目标 ：使用vue-cli创建vue“空”项目，为这个项目搭建多页面配置，登录页和首页。

前提：创建一个vue空项目，这个不做演示了（vue create more_page）

 创建好的项目结构：

步骤1：编写配置文件 vue.config.js

添加编写配置项：pages

pages: {
          // 配置主页
          index: {
              entry: './src/main.js',   // 页面入口文件
              template: './public/index.html',  // 页面主组件挂载的html文件
              title: '首页' // 页面标题
          },
          // 配置其他页面
          login: {
              entry: './src/pages/Login/Login.js',
              template: './public/login.html',
              title: '登录'
          }
      }

 注意看注释 

这里的index是默认访问的首页，例如，我们把服务器跑在本地的8080端口，

那么访问localhost:8080或localhost:8080/index都是访问到项目首页，

而访问localhost:8080/login就会访问到登录页。

** 这样配置后，多页面是不是就有眉目了，接下来就去创建相应的文件夹和文件基本就没问题了。

步骤2：在src目录下创建目录pages

 

在pages目录中，就可以定义每一个子页面了，就像上图中的这样，需要有最基本的两个文件（示例中的Login.js 和 Login.vue），入口文件和主组件（类似APP，全部组件的父组件）。

 入口文件login.js: 

import Vue from 'vue'
import Login from './Login.vue';
 
new Vue({
  render: h => h(Login),
}).$mount('#login')

注意导入的主组件Login.vue，将主组件挂载到HTML页面上（待会儿创建），#login是自定义的，下面会说明到。

 主组件Login.vue  

内容随意了，因为仅说明多页面的访问。

步骤3：创建HTML文件（主组件挂载点）

在public下创建login.html，在中添加一个盒子div给id（此处的id就是Login.js中挂载的#id）

 

测试

 启动项目，访问localhost:8080 (模拟首页)和 localhost:8080/login（模拟登录页） 进行测试。

 

完毕，总结

其实实现多页面很简单，就是在vue.config.js文件中进行多页面的配置，把入口文件，主组件，html文件做好关联即可。
关于其他文件夹（如component, view）的放置，其实组件间能相互引用就行，但最好把一个页面（例如登录页面）的所有东西（组件，vue视图）放在一个文件夹下。

 **注意** ：本片博客仅在说明多页面的配置，有诸多不规范，更多用途请自行发挥。