Vue 3.x 多页面应用配置教程 - 设置默认跳转页面

要将 Vue 3.x 配置为多页面应用程序，需要进行以下步骤：

1. 将 webpack 配置文件中的 entry 属性改为一个对象，其中键是每个页面的名称，值是每个页面的入口文件路径。例如：

entry: {
  index: './src/index.js',
  about: './src/about.js',
  contact: './src/contact.js'
}

2. 在 output 属性中，将 filename 设置为动态生成的文件名，使用 [name] 占位符来代表每个页面的名称。例如：

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

3. 在 plugins 属性中添加 HtmlWebpackPlugin 插件，以生成每个页面的 HTML 文件。例如：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    chunks: ['index']
  }),
  new HtmlWebpackPlugin({
    template: './src/about.html',
    filename: 'about.html',
    chunks: ['about']
  }),
  new HtmlWebpackPlugin({
    template: './src/contact.html',
    filename: 'contact.html',
    chunks: ['contact']
  })
]

4. 最后，在路由配置中设置默认跳转页面。可以使用 Vue Router 的 redirect 属性来实现。例如：

const routes = [
  { path: '/', redirect: '/index' },
  { path: '/index', component: Index },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

在这个例子中，如果用户访问根路径“/”，它将被重定向到“/index”页面。