Vue多页面应用程序的构建

1、利用vue脚手架快速搭建项目目录

a、 vue  init  webpack  test         生成项目目录
b、 npm  install                     安装项目依赖
c、 npm  run  dev                    运行项目页面

2、新建项目文件：

根目录下： html文件one.html、two.html

Src目录下：one.vue、two.vue文件和one.js、two.js文件

3、修改相应的配置文件

文件路径：build\webpack.base.conf.js
=> module.exports
=> entry添加多个入口

//  entry  入口文件
entry: {
  app: './src/main.js',
  one: './src/js/one.js',
  two: './src/js/two.js'
},

4、 修改开发环境 run dev

4.1 文件路径：build\webpack.dev.conf.js
=> module.exports
=> plugins

//  plugins  配置
plugins: [
  new webpack.DefinePlugin({
    'process.env': config.dev.env
  }),

// https://github.com/glenjamin/webpack-hot-middleware#installation--usage

  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),

// https://github.com/ampedandwired/html-webpack-plugin

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    chunks: ['app']
  }),
  new HtmlWebpackPlugin({
    filename: 'one.html',
    template: 'one.html',
    inject: true,
    chunks: ['one']
  }),
  new HtmlWebpackPlugin({
    filename: 'two.html',
    template: 'two.html',
    inject: true,
    chunks: ['two']
  }),
  new FriendlyErrorsPlugin()
]

4.2 文件路径：config\index.js
=> build

//  build 配置
index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

4.3 文件路径：build/webpack.prod/conf.js
=> plugins
=> HTMLWebpackPlugin

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  chunks: ['manifest', 'vendor', 'app']
}),

new HtmlWebpackPlugin({
  filename: config.build.one,
  template: 'one.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency',
  chunks: ['manifest', 'vendor', 'one']
}),

  new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
  })

注意： filename引用的是config\index.js里的build

5、 其他文件的内容

//  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   配置

//  App.vue  配置