vue-cli 3.0 多页面 怎么配置？

Question

版本: @vue/cli-service": "^3.0.0-beta.6配置了chaiWebpack,但configureWebpack不知道怎么配置，求指点~~vue.config.js 如下：module.exports = {   lintOnSave: false,   chainWebpack: config => {    config       .entry('one')       .add('./src/pages/one/one.ts')       .end()       .entry('two')       .add('./src/pages/two/two.ts')       .end()   },   configureWebpack: config => {    if (process.env.NODE_ENV === 'production') {      // mutate config for production...     } else {      // mutate for development...     }   } }

Answer 1

可以直接在vue.config.js 中 设置 pages属性来做到

// vue.config.jsmodule.exports = {
  pages: {    index: {      // 入口js的路径
      entry: './src/views/index/entry',      // 页面模板路径
      template: `./src/views/index/index.html`
    }
  }
}

pages 可以遍历获得

在 @vue/cli-service/lib/config/app.js 中有下面一段，里面已经考虑了多页的情况

// @vue/cli-service/lib/config/app.js...const multiPageConfig = options.pages

...if (!multiPageConfig) {  // default, single page setup.
  ......
} else {  // multi-page setup
  webpackConfig.entryPoints.clear()  const pages = Object.keys(multiPageConfig)
  pages.forEach(name => {    const {
      entry,
      template = `public/${name}.html`,
      filename = `${name}.html`
    } = multiPageConfig[name]    // inject entry
    webpackConfig.entry(name).add(api.resolve(entry))    // inject html plugin for the page
    const pageHtmlOptions = Object.assign({}, htmlOptions, {
      chunks: ['chunk-vendors', 'chunk-common', name],
      template: fs.existsSync(template) ? template : defaultHtmlPath,
      filename
    })

    webpackConfig
      .plugin(`html-${name}`)
        .use(HTMLPlugin, [pageHtmlOptions])
  })

  pages.forEach(name => {    const { filename = `${name}.html` } = multiPageConfig[name]
    webpackConfig
      .plugin(`preload-${name}`)
        .use(PreloadPlugin, [{
          rel: 'preload',
          includeHtmlNames: [filename],
          include: {            type: 'initial',
            entries: [name]
          },
          fileBlacklist: [/\.map$/, /hot-update\.js$/]
        }])

    webpackConfig
      .plugin(`prefetch-${name}`)
        .use(PreloadPlugin, [{
          rel: 'prefetch',
          includeHtmlNames: [filename],
          include: {            type: 'asyncChunks',
            entries: [name]
          }
        }])
  })
}

Answer 2

// vue.config.js
module.exports = { 
pages: {

index: {  // entry for the page
  entry: 'src/main.js',  // the source template
  template: 'public/index.html',  // output as dist/index.html
  filename: 'index.html'},shareback: {  entry: 'src/shareback.js',  template: 'public/shareback.html',  filename: 'shareback.html'},

}
}