Nuxt.js 打包页面源代码格式化输出 - 使用 Webpack Analyzer

要在 Nuxt.js 中格式化输出打包页面的源代码，您可以使用以下步骤：

1. 安装 @nuxtjs/webpackmonitor 插件

npm install @nuxtjs/webpackmonitor --save-dev

2. 在 nuxt.config.js 文件中添加以下配置：

build: {
  extend(config, { isDev, isClient }) {
    if (isDev && isClient) {
      // Run ESLint on save
      config.module.rules.push({
        enforce: 'pre',
        test: /.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })

      // 输出打包页面的源代码
      config.plugins.push(new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)({
        analyzerMode: 'static',
        generateStatsFile: true,
        openAnalyzer: false,
        logLevel: 'info'
      }))
    }
  }
}

3. 运行 npm run build 命令打包应用程序。

4. 打开 dist 目录中的 stats.json 文件，将其复制到 Webpack Analyzer 网站上。

5. 在 Webpack Analyzer 网站上，您可以查看打包页面的源代码，并对其进行格式化输出。