Vue3.x 多页面应用：默认打开指定页面

在 Vue3.x 中，使用 webpack 配置入口和 HTMLWebpackPlugin 插件可以实现多页面应用。本文将介绍如何配置这些插件，并设置默认打开的页面。

1. 配置 entry 入口

在 webpack.config.js 文件中配置 entry 入口，例如：

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    page3: './src/page3.js',
  },
  // ...
}

上面的配置将会生成三个入口文件：page1.js、page2.js 和 page3.js。

2. 配置 HTMLWebpackPlugin 插件

在 webpack.config.js 文件中配置 HTMLWebpackPlugin 插件，例如：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    page3: './src/page3.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Page 1',
      template: 'src/index.html',
      filename: 'page1.html',
      chunks: ['page1'],
    }),
    new HtmlWebpackPlugin({
      title: 'Page 2',
      template: 'src/index.html',
      filename: 'page2.html',
      chunks: ['page2'],
    }),
    new HtmlWebpackPlugin({
      title: 'Page 3',
      template: 'src/index.html',
      filename: 'page3.html',
      chunks: ['page3'],
    }),
  ],
  // ...
}

上面的配置将会生成三个 HTML 文件：page1.html、page2.html 和 page3.html，每个文件中只包含对应的入口 chunk。

3. 配置默认打开页面

可以在 webpack-dev-server 的配置中设置 open 选项来指定默认打开的页面，例如：

module.exports = {
  // ...
  devServer: {
    open: 'page2.html',
  },
};

上面的配置将会默认打开 page2.html 页面。

通过以上步骤，您就可以实现 Vue3.x 多页面应用并设置默认打开页面。