vue多页面应用如何针对其中的某个页面进行单独打包

Vue多页面应用可以通过webpack的entry配置来实现针对某个页面进行单独打包的功能。

1. 在webpack的entry配置中，为需要单独打包的页面设置一个入口文件，例如：

module.exports = {
  entry: {
    index: './src/pages/index/main.js',
    about: './src/pages/about/main.js'
  },
  // ...
}

2. 在webpack的output配置中，设置打包后的输出文件名，例如：

module.exports = {
  entry: {
    index: './src/pages/index/main.js',
    about: './src/pages/about/main.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].js'
  },
  // ...
}

其中`[name]`会被替换成entry中的键名，即页面名称。

3. 在webpack的plugins配置中，使用`HtmlWebpackPlugin`插件生成HTML文件，并指定对应的入口文件，例如：

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

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

其中`chunks`选项指定需要引入的打包后的js文件，即entry中的键名。

通过以上配置，webpack会针对每个页面生成单独的打包文件，可以实现针对某个页面进行单独打包的功能。