运行npm run dev时mix-manifest文件自动变更，如何禁止并添加静态/动态值？

Laravel Mix每次执行编译命令时都会全量重写mix-manifest.json，直接手动修改的内容必然会被覆盖，可通过以下两种方案实现自定义静态/动态值的持久化：

方案1：追加自定义内容（推荐，兼容原有流程） #

通过Mix提供的编译完成钩子，在默认manifest生成后追加自定义内容，不影响Mix自动生成的原有映射关系：

• 打开项目根目录下的webpack.mix.js文件，添加如下代码：

const mix = require('laravel-mix');
const fs = require('fs');

// 保留你原有项目的Mix配置
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

// 编译完成钩子，修改manifest内容
mix.after(() => {
  // 确认manifest文件路径，默认在public目录下
  const manifestPath = `${__dirname}/public/mix-manifest.json`;
  const defaultManifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));

  // 1. 添加静态值
  defaultManifest['/static/iconfont.css'] = '/static/iconfont.css?v=1.2.0';
  defaultManifest['/static/background.jpg'] = '/static/background.jpg?v=2024';

  // 2. 添加动态值示例：取当前编译时间戳作为版本号
  const buildTimestamp = Date.now();
  defaultManifest['/dynamic/runtime-config.js'] = `/dynamic/runtime-config.js?v=${buildTimestamp}`;

  // 将修改后的内容写回文件
  fs.writeFileSync(manifestPath, JSON.stringify(defaultManifest, null, 2));
});

如果你使用的是Laravel Mix v6以下的旧版本，将mix.after替换为mix.then即可，逻辑完全一致。

方案2：完全自定义manifest（适合需要自主控制全量内容的场景） #

如果不需要Mix自动生成的资源映射，可以直接禁用默认manifest生成逻辑，自己输出完整文件：

• 先禁用默认manifest生成

mix.options({
  manifest: false
});

• 同样在mix.after钩子中自行构造完整的manifest对象，写入到对应路径即可。

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