Nuxt.js项目能否构建为整合所有JS、CSS的单个输出文件

可以实现，你可以通过配置Nuxt的构建参数结合第三方插件完成单HTML文件打包，所有JS、CSS资源都会内联到最终的html文件里，符合你嵌入CMS的需求。

你提到的客户CMS仅支持单HTML文件的场景，该方案打包后的产物仅会生成1个index.html文件，所有运行依赖的JS逻辑、样式资源都会直接内联到文件中，无需额外加载外部资源。

Nuxt 3 配置方案 #

• 安装依赖：npm install --save-dev nuxt-single-file
• 修改nuxt.config.ts配置：

export default defineNuxtConfig({
  modules: ['nuxt-single-file'],
  // 开启SSG静态生成，必须配置
  ssr: false,
  singleFile: {
    // 自动内联所有资源
    inlineAll: true,
    // 移除多余的外部资源引用
    removeExternalAssets: true
  }
})

• 执行构建命令：nuxi generate，构建完成后.output/public目录下只会生成单个index.html文件。

Nuxt 2 配置方案 #

• 安装依赖：npm install --save-dev html-webpack-inline-source-plugin @nuxtjs/webpack-profile
• 修改nuxt.config.js配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

export default {
  // 关闭SSR，使用纯客户端渲染
  ssr: false,
  build: {
    // 关闭代码分割，合并所有JS到单个文件
    splitChunks: {
      layouts: false,
      pages: false,
      commons: false
    },
    // 配置内联插件
    extend(config, { isClient }) {
      if (isClient) {
        config.plugins.forEach(plugin => {
          if (plugin.constructor.name === 'HtmlWebpackPlugin') {
            // 配置所有js和css资源都内联
            plugin.options.inlineSource = '.(js|css)$'
          }
        })
        config.plugins.push(new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin))
      }
    }
  }
}

• 执行构建命令：nuxt generate，构建后的dist目录下会生成单个内联所有资源的index.html文件。

注意事项 #

• 必须关闭SSR功能使用纯客户端渲染模式，服务端渲染模式下无法实现单文件打包
• 如果你有静态资源比如图片、字体等需求，可以提前将资源转为base64编码后引入，避免出现外部资源依赖
• 单文件打包后体积会比常规拆分打包的体积大，建议提前测试在客户CMS中的加载性能是否符合要求

内容的提问来源于stack exchange，提问作者Michal Skop