vue-cli 3.x配置多页面

之前已经介绍了 2.x配置多页面，今天介绍下3.x配置多页面的步骤，相对来说比2.x方便一些~

适用于vue-cli 3.x

1. 创建相应的html页面和对应的.vue ,.js文件（复制index.html,App.vue,main.js然后对应修改成相应的页面就行）
2. 配置vue.config.js

1.创建多页面所需要的文件

3.x创建多页面跟2.x的步骤一样
这里我建议保留初始化的项目文件位置不变，配置的多页面可以存放在新的文件夹src/pages下，方便日后的管理。

1. index.html同级创建多页面文件login.html。
2. 在src/pages/login文件夹中 创建对应的login.js ,login.vue(拷贝App.vue,main.js修改下就可以啦)

login.js 文件

import Vue from 'vue'
import Login from './login.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(Login)
}).$mount('#login')

login.vue文件

<template>
  <div id="login">
      <input type="button" value="点击跳转到index页面"  @click="go()">
  </div>
</template>

<script>
export default {
	name:'login',
	methods:{
		go(){
				window.location.href="/"
		}
	}
}
</script>
<style lang="scss">
</style>

---

2.配置vue.config.js

3.x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。

参数：
entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；

vue.config.js文件

module.exports = {
	pages:{
        index:{
          // page 的入口
            entry:'src/main.js', 
          // 模板来源
            template:'public/index.html',
          // 在 dist/index.html 的输出
            filename:'index.html',
          // 当使用 title 选项时，
      	  // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title:'index',
          // 提取出来的通用 chunk 和 vendor chunk。
      	  //chunks: ["chunk-vendors", "chunk-common", "index"]
        },
        login:{
            entry:'src/pages/login/login.js',
            template:'public/login.html',
            filename:'login.html',
            title:'login'
        }
    }
}

这样多页面就算是配置好了，重启服务地址栏键入login.html，和index.html都会有对应的页面显示啦~~~~