是否可以直接将vue-cli修改成多页面的模板

Question

本来想自己配置一个适用于 多页面开发 的基于vue的webpack，特别困难= =
所以 想问下 是否有基于 vue-cli这个改写来用于 多页面开发的成功先例。

Answer 1

肯定是可以改的，vue-cli也只不过是个灵活点的脚手架而已，本质上还是基于webpack做架构

Answer 2

做chrome插件的时候，大略改了一下。在config/index.js下加个mutiple的属性，配置大致如下：

pages: [{
      name: 'home',
      chunks: ['vendor','manifest','main']
    }],
    entry: {
      main: './src/main.js',
      background: './src/background.js',
      login: './src/content/login.js',
      transfer: './src/content/transfer.js'
    },

然后改webpack.prod.conf.js和webpack.dev.conf.js
例如webpack.prod.conf.js我就改成了这样

var plugins = [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
    'process.env': env
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),
  // extract css into its own file
  new ExtractTextPlugin(utils.assetsPath('css/[name].css')),
  // generate dist index.html with correct asset hash for caching.
  // you can customize output by editing /index.html
  // see https://github.com/ampedandwired/html-webpack-plugin

  // split vendor js into its own file
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module, count) {
      // any required modules inside node_modules are extracted to vendor
      return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
              path.join(__dirname, '../node_modules')
          ) === 0
      )
    }
  }),
  // extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    chunks: ['vendor']
  })
]
var pages = config.mutiple.pages
pages.forEach(function (page) {
  plugins.push(new HtmlWebpackPlugin({
    filename: process.env.NODE_ENV === 'testing'
        ? page.name + '.html'
        : config.mutiple.index(page.name),
    template: 'index.html',
    inject: true,
    chunks: page.chunks,
    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'
  }))

})

对了，webpack.base.conf.js里的entry也要改成配置的entry