Vue 多页面应用配置及默认跳转页面设置

将 Vue 配置为多页面应用，并设置默认跳转页面

1. 配置多页面应用

首先，在 webpack 配置文件中，需要将 entry 改成一个对象，每个 key 对应一个页面，value 对应该页面的入口文件路径。

entry: {
  page1: './src/page1/main.js',
  page2: './src/page2/main.js',
  page3: './src/page3/main.js'
}

然后，在 output 配置中，需要将 filename 改成一个对象，每个 key 对应一个页面，value 对应该页面的打包后的文件名。

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

最后，在 HtmlWebpackPlugin 的配置中，需要为每个页面配置一个 HtmlWebpackPlugin 实例。

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

2. 设置默认跳转页面

在多页面应用中，如果没有指定跳转页面，那么默认会跳转到服务器根目录下的 index.html 页面。

所以，我们只需要将我们想要作为默认跳转页面的页面命名为 index.html，然后放在服务器根目录下即可。

例如，我们想要将 page1 页面作为默认跳转页面，那么我们只需要将 page1.html 重命名为 index.html，然后放在服务器根目录下即可。