如何用vue实现多页面应用

我们平常用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