vue2 如何配置多页面

对于vue2的多页面配置，可以在webpack的配置文件中设置多个entry和对应的htmlWebpackPlugin配置。具体步骤如下：

1. 在项目根目录下创建一个pages文件夹用于存放多页面的入口文件和对应的html文件

2. 在webpack的配置文件中，配置多个entry和对应的htmlWebpackPlugin配置，示例如下：

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

module.exports = {
  mode: 'development',
  entry: {
    page1: path.resolve(__dirname, '../pages/page1/main.js'),
    page2: path.resolve(__dirname, '../pages/page2/main.js')
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: path.resolve(__dirname, '../pages/page1/page1.html'),
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: path.resolve(__dirname, '../pages/page2/page2.html'),
      chunks: ['page2']
    })
  ]
}

其中，entry配置了页面对应的入口文件路径，output配置了输出文件的路径和文件名。plugins配置了htmlWebpackPlugin插件，用于生成对应的html文件，chunks选项表示该页面需要引入哪些打包生成的代码块。

3. 在各个入口文件中，通过import方式引入对应的Vue组件和样式文件，示例如下：

import Vue from 'vue'
import App from './App.vue'
import './style.css'

new Vue({
  render: h => h(App)
}).$mount('#app')

4. 最后，运行打包命令即可生成对应的多页面应用：

npm run build