1、创建如下三个文件src\pages\one\one.htmlsrc\pages\one\one.jssrc\pages\one\one.vue
2、修改build\webpack.base.conf.js目录下，在module.exports中，找到entry，添加多个入口one.jsone: './src/pages/one/one.js'
3、对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，找到plugins,添加如下配置new HtmlWebpackPlugin({ filename: 'one.html', template: 'src/pages/one/one.html', inject: true, chunks: ['one'] })
4、对run build也就是编译环境进行配置。打开\config\index.js文件，在build里加入：one: path.resolve(__dirname, '../dist/one.html')
5、配置生产环境打开/build/webpack.prod.conf.js文件，找到plugins，添加如下配置new HtmlWebpackPlugin({ filename: config.build.one, template: 'one.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'one'] }),filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。
6、然后one.js文件可以这样写：import Vue from 'vue'import one from './one.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#one', render: h => h(one)})在one.vue写法如下：<template><div id="one"> 多页面开发之 页面一</div></template><script>export default { }</script><style ></style>然后在App.vue里可以这样写：<template> <div id="app"> <a href="one.html">one</a> <router-view/> </div></template>
7、查看效果可以看到我们的配置成功了
