vue.js开发多页面应用

/project
  /src
    /pages
      /home
        Home.vue
        index.js
      /about
        About.vue
        index.js
    /components
      Header.vue
      Footer.vue
    webpack.config.js

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: './src/pages/home/index.js',
    about: './src/pages/about/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/pages/home/index.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: './src/pages/about/index.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

// src/pages/home/index.js
import Vue from 'vue';
import Home from './Home.vue';

new Vue({
  render: h => h(Home)
}).$mount('#app');

// src/pages/about/index.js
import Vue from 'vue';
import About from './About.vue';

new Vue({
  render: h => h(About)
}).$mount('#app');

<!-- src/pages/home/Home.vue -->
<template>
  <div>
    <Header />
    <h1>Home Page</h1>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';

export default {
  components: {
    Header,
    Footer
  }
};
</script>

<!-- src/pages/about/About.vue -->
<template>
  <div>
    <Header />
    <h1>About Page</h1>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';

export default {
  components: {
    Header,
    Footer
  }
};
</script>