同一vue.config.js连续执行npm run build输出不一致求助

生产环境构建时，偶尔会生成大小和内容略有差异的输出——10次构建里9次能生成一致的输出和哈希结果，但有1次会出现.js文件的细微差异（差异对比见下图）。请问如何解决这个问题？

相关配置文件 #

vue.config.js #

const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const path = require('path');

module.exports = {
  filenameHashing: false,
  chainWebpack: config => {config.optimization.minimize(false);},
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.ts',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  devServer: {
    hot: true,
    liveReload: true
  },

  configureWebpack: {
    devtool: false,
    
    plugins: [
      require('unplugin-vue-components/webpack')({
        resolvers: [ElementPlusResolver()],
      }),
      require('unplugin-auto-import/webpack')({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
};

tsconfig.json #

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": false,
    "baseUrl": ".",
    "types": [
      "webpack-env", "offscreencanvas"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

package.json #

{
  "name": "test-js",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "export ENVSOURCEMAPMODE=inline-source-map && vue-cli-service build --mode production && ./copyfiles.sh",
    "build-debug": "export ENVSOURCEMAPMODE=inline-source-map && vue-cli-service build && ./copyfiles.sh",
    "watch": "npm run build-debug && npm-watch"
  },
  "watch": {
    "build-debug": {
      "patterns": [
        "src"
      ],
      "extensions": "vue,css,js,ts"
    }
  },
  "dependencies": {
    "@types/offscreencanvas": "^2019.6.4",
    "core-js": "^3.6.5",
    "element-plus": "^2.0.5",
    "@element-plus/icons-vue": "^0.2.4",

    "vue-class-component": "^8.0.0-0"
  },
  "devDependencies": {
    "npm-watch": "^0.11.0",
    "vue": "^3.2.39",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-typescript": "^5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.51.0",
    "sass-loader": "^10.1.1",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.5.9",
    "unplugin-vue-components": "^0.17.11",
    "vue-plugin-webextension-i18n": "^0.1.2"
  }
}

问题原因与解决办法 #

1. 自动导入插件的随机性 #

你使用的unplugin-auto-import和unplugin-vue-components低版本存在模块导入顺序随机的问题，导致生成代码出现差异。

• 修复方案：
  升级插件到最新稳定版：

  npm update unplugin-auto-import unplugin-vue-components
  

  同时在插件配置中添加dts: true，生成固定的类型声明文件，锁定导入逻辑：
  修改vue.config.js中的插件配置：

  require('unplugin-vue-components/webpack')({
    resolvers: [ElementPlusResolver()],
    dts: true // 新增
  }),
  require('unplugin-auto-import/webpack')({
    resolvers: [ElementPlusResolver()],
    dts: true // 新增
  }),
  

2. Webpack模块ID的不确定性 #

Webpack默认的模块ID生成规则可能因构建环境变化产生差异，导致输出内容不同。

• 修复方案：
  在configureWebpack中添加固定模块和chunk ID的配置：

  configureWebpack: {
    devtool: false,
    moduleIds: 'deterministic', // 固定模块ID
    chunkIds: 'deterministic', // 固定chunk ID
    plugins: [
      // ... 原有插件
    ],
  }
  

3. 环境变量的模糊处理 #

build脚本中的ENVSOURCEMAPMODE环境变量未在配置中明确绑定，可能导致构建时的细微差异。

• 修复方案：
  在vue.config.js中直接根据环境配置sourceMap，替代环境变量：

  module.exports = {
    // ... 其他配置
    configureWebpack: {
      devtool: process.env.NODE_ENV === 'production' ? 'inline-source-map' : false,
      // ... 其他配置
    }
  }
  

  然后修改package.json中的build脚本，移除冗余环境变量：

  "scripts": {
    "build": "vue-cli-service build --mode production && ./copyfiles.sh",
    "build-debug": "vue-cli-service build && ./copyfiles.sh",
    // ... 其他脚本
  }
  

4. 临时禁用缓存排查 #

如果以上方法无效，可临时禁用Webpack缓存，确认是否是缓存导致的不一致：
在vue.config.js中添加：

configureWebpack: {
  // ... 其他配置
  cache: false,
}

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