如何通过vue.config.js的webpack配置将JSON对象写入dist文件夹生成JSON文件

你可以通过在vue.config.js中注入极简的自定义webpack插件实现该需求，无需额外依赖，会在构建流程中自动将内存中的JSON对象输出到dist目录。

完整配置示例 #

const { defineConfig } = require('@vue/cli-service')
// 替换为你自己的内存JSON对象，支持动态拼接生成
const customJson = {
  appName: "demo",
  timestamp: Date.now(),
  config: {
    apiBase: "/api",
    timeout: 10000
  }
}

module.exports = defineConfig({
  // 你原有配置保持不变
  configureWebpack: {
    plugins: [
      {
        apply: (compiler) => {
          // 监听webpack构建输出阶段的钩子
          compiler.hooks.emit.tap('OutputCustomJsonPlugin', (compilation) => {
            // 转换JSON对象为字符串，第三个参数用于格式化输出，不需要可以删除
            const fileContent = JSON.stringify(customJson, null, 2)
            // 将JSON内容加入构建产物列表，第一个参数为输出的文件名，支持子目录
            compilation.emitAsset(
              'custom-config.json',
              new compiler.webpack.sources.RawSource(fileContent)
            )
          })
        }
      }
    ]
  }
})

配置说明 #

• 输出文件名可自定义，如需输出到dist下的子目录，直接填写路径即可，比如config/app.json，webpack会自动生成对应目录结构
• 内存JSON对象支持动态生成，你可以提前通过逻辑计算、接口请求、其他配置拼接等方式生成该对象

注意事项 #

• 每次执行npm run build时该文件会自动和其他构建产物一起生成到dist目录，无需单独执行额外脚本
• 开发模式下执行npm run serve时该配置也会生效，你可以直接通过对应路径访问到这个JSON文件
• 如果你使用的是vue-cli 4及更早版本（对应webpack 4），可以先安装webpack-sources依赖，将代码中的new compiler.webpack.sources.RawSource替换为new require('webpack-sources').RawSource即可

内容的提问来源于stack exchange，提问作者Yang Liang