How to configure multiple pages of vue-cli 3.0?

version: @ vue/cli-service ":" ^ 3.0.0-beta.6

chaiWebpack, is configured, but configureWebpack does not know how to configure it. Ask for advice ~

vue.config.js is as follows:

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...
    }
  }
}
Apr.11,2021

you can set the pages property directly in vue.config.js to do so

// vue.config.js
module.exports = {
  pages: {
    index: {
      // js
      entry: './src/views/index/entry',
      // 
      template: `./src/views/index/index.html`
    }
  }
}

pages can be traversed to get

there is the following paragraph in @ vue/cli-service/lib/config/app.js, in which multiple pages have been considered

// @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]
          }
        }])
  })
}

/ / 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'
},

}
}


is also studied yesterday
paste the code first

let path = require('path')
let glob = require('glob')
let fs = require('fs')
let meta = require('./package.json')

let webpack = require("webpack");

//jshtml
function getEntry(globPath) {
    let entries = {},
        basename, tmp, pathname, appname;

    glob.sync(globPath).forEach(function(entry) {
        basename = path.basename(entry, path.extname(entry));
        tmp = entry.split('/').splice(-3);
        pathname = basename; // jshtml

        appname = pathname.split('-')[0]
        entries[appname] = entry;
    });
    return entries;
}

let htmls = getEntry('./src/module/**/*.html');
let allJs = getEntry('./src/module/**/*-en.js');//

module.exports = {
    chainWebpack: config => {
        //
        config.resolve.alias
            .set("assets", path.resolve(__dirname, 'src/assets'))
            .set("components", path.resolve(__dirname, 'src/components'))

        config.plugins.delete("html")
        config.entryPoints.delete("app")

        //
        if(process.env.NODE_ENV === 'production') {
            config
                .devtool()

            let prefix = meta.envirmentDebug ? "t" : "p"
            config
                .output
                .publicPath('https://xxx.xxx.com/' + prefix + '/' + meta.name + '/' + meta.v)
        }

        for(let appname in allJs) {
            config
                .entry(appname)
                .clear()
                .add(allJs[appname])
                .end()
        }

        for(let appname in htmls) {

            let htmlPath = path.resolve(htmls[appname])

            config
                .plugin(appname)
                .use(require('html-webpack-plugin'), [
                    fs.existsSync(htmlPath) ? {
                        template: htmlPath,
                        filename: appname + ".html",
                        inject: true,
                        hash: true,
                        chunks: ['manifest', 'vendor', appname]
                    } : {}
                ])
        }
    }
}

ask questions that are not clear. ~ that's all for now


https://cli.vuejs.org/zh/conf. see the official document.


is also used these days. The multi-page configuration of vue-cli@3.0, is created vue.config.js in the root directory, with pages configuration and document .
and when developing, you will encounter page problems that cannot be found Cannot GET / ems/admin/home . Please refer to my question . Thank you again for answering my question, buddy ~


whether the landlord has solved the problem ~

.
Menu