vue-cli多页面配置（vue2.0）
给使用vue-cli创建的项目配置成多页面应用。
目录
概述
我们知道使用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，在<body>中添加一个盒子div给id（此处的id就是Login.js中挂载的#id）
测试
启动项目，访问localhost:8080 (模拟首页)和 localhost:8080/login（模拟登录页） 进行测试。
完毕，总结
其实实现多页面很简单，就是在vue.config.js文件中进行多页面的配置，把入口文件，主组件，html文件做好关联即可。
关于其他文件夹（如component, view）的放置，其实组件间能相互引用就行，但最好把一个页面（例如登录页面）的所有东西（组件，vue视图）放在一个文件夹下。
**注意** ：本片博客仅在说明多页面的配置，有诸多不规范，更多用途请自行发挥。
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)