我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的，其实不是。因为vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。
有如下几个地方要修改：
1、build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：
entry: ["babel-polyfill", app: "./src/main.js",只需在后面添加你想要入口文件，想实现几个页面就添加几个，
如one（随意，但要记住，后面要用）: './src/js/one.js',],
2、build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',//(在这里改成你的html)
template: 'index.html',//(在这里改成你的html)
inject: true,
chunks: ['app']//(在这里改成你的)
}),
/***然后在后面复制，有几个复制几个***/
]
3、打开\config\index.js文件，在build里加入这个：
build: {
index: path.resolve(__dirname, '../dist/index.html'),//(在这里改成你的html)
/***然后在后面复制，有几个复制几个***/
}
4、打开/build/webpack.prod/conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：
new HtmlWebpackPlugin({
filename: config.build.index,//(在这里改成你的html)
template: 'index.html',//(在这里改成你的html)
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'app']//(在这里和你上面chunks里面的名称对应)
}),
/***然后在后面复制，有几个复制几个***/
其中filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。
5、别忘记在你加的js和vue里面也要进行更改
//下面是
import Vue from 'vue'
import App from './App.vue'(在这里改成你的)
Vue.config.productionTip = false
new Vue({
el: '#App',(在这里改成你的)
render: h => h(one)
})
//下面是vue的内容
<template>
<div id="app">(在这里改成你的)
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',(在这里改成你的)
data () {
return {
msg: 'I am one'
}
}
}
</script>
6、App.vue里通过这样写:把你加的页面都写在里面
<template>
<div id="app">
<a href="one.html"></a><br>
<a href="two.html"></a><br>
{{msg}}
</div>
</template>
借鉴来源：https://blog.csdn.net/Tank_in_the_street/article/details/73732801
