我們平常用vue開發(fā)的時(shí)候總覺得vue好像就是專門為了單頁(yè)面應(yīng)用而誕生的，其實(shí)不是。因?yàn)関ue在工程化開發(fā)的時(shí)候很依賴webpack，而webpack是將所有的資源整合到一塊，弄成一個(gè)單頁(yè)面。但是vue不止可以做單頁(yè)面，它還可以做多頁(yè)面，如果要做多頁(yè)面的話需要對(duì)他的依賴，也就是webpack就是重新配置才可以。本文將詳細(xì)講webpack的配置。
有如下幾個(gè)地方要修改：
1、build\webpack.base.conf.js目錄下，在module.exports的域里，找到entry，在那里配置添加多個(gè)入口：

entry: ["babel-polyfill",  app: "./src/main.js",只需在后面添加你想要入口文件，想實(shí)現(xiàn)幾個(gè)頁(yè)面就添加幾個(gè)，
如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']//(在這里改成你的)
    }),
   /***然后在后面復(fù)制，有幾個(gè)復(fù)制幾個(gè)***/
  ]

3、打開\config\index.js文件，在build里加入這個(gè)：

build: {
    index: path.resolve(__dirname, '../dist/index.html'),//(在這里改成你的html)
   /***然后在后面復(fù)制，有幾個(gè)復(fù)制幾個(gè)***/
}

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里面的名稱對(duì)應(yīng))
    }),
  /***然后在后面復(fù)制，有幾個(gè)復(fù)制幾個(gè)***/

其中filename引用的是\config\index.js里的build，每個(gè)頁(yè)面都要配置一個(gè)chunks，不然會(huì)加載所有頁(yè)面的資源。
5、別忘記在你加的js和vue里面也要進(jìn)行更改

//下面是
import Vue from 'vue'
import App from './App.vue'(在這里改成你的)

Vue.config.productionTip = false
new Vue({
  el: '#App',(在這里改成你的)
  render: h => h(one)
})
//下面是vue的內(nèi)容
<template>
  <div id="app">(在這里改成你的)
    {{msg}}
  </div>
</template>
<script>
export default {
  name: 'app',(在這里改成你的)
  data () {
    return {
      msg: 'I am one'
    }
  }
}
</script>

6、App.vue里通過這樣寫:把你加的頁(yè)面都寫在里面

<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