In a multi-page application, how to customize the index.html output directory for a certain page？

[kimmy-wang]

In a multi-page application, how to customize the index.html output directory for a certain page. @sodatea

// vue.config.js
const path = require("path");
const WebpackBar = require("webpackbar");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const name = "Gitter"; // page title

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: "",
  assetsDir: "static",
  pages: {
    index: "./src/main.js",
    auth: {
      entry: "./src/auth.js",
      filename: "auth/index.html",
    },
  },
  lintOnSave: process.env.NODE_ENV !== "production",
  productionSourceMap: false,
  configureWebpack: () => {
    const config = {
      name,
      resolve: {
        alias: {
          "@": resolve("src"),
        },
      },
    };
    if (process.env.NODE_ENV === "production") {
      config.plugins = [
        new WebpackBar({
          name,
        }),
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        }),
      ];
    }
    return config;
  },
};

[screetBloom]

see here 👉👉：https://cli.vuejs.org/config/#pages

pages: {
  index: 'src/index/main.js'
  test: {
    entry: 'src/test/main.js',
    template: 'public/index.html',
+   filename: 'test/index.html',  
  },
}

@realkimmy