从Webpack迁移至Vite：开发正常预览部署报错及配置求助

从Webpack迁移到Vite后，执行yarn serve开发模式一切正常，但运行部署命令或yarn preview预览生产构建产物时，应用一直处于加载状态，控制台抛出错误：Uncaught ReferenceError: Cannot access 'wat' before initialization。当前使用的Vite配置如下：

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue2";
import commonjs from "@rollup/plugin-commonjs";
import GlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";

export default defineConfig({
 plugins: [
  vue(),
  commonjs(),
  GlobalsPolyfills({
   process: true,
   buffer: true,
  }),
 ],
 define: {
  global: "globalThis",
 },
 resolve: {
  alias: {
   "@": path.resolve(__dirname, "./src"),
   "vue-socials": "vue-socials/dist/vue-socials.es.js",
   stream: "rollup-plugin-node-polyfills/polyfills/stream",
   zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
   util: "rollup-plugin-node-polyfills/polyfills/util",
  },
  extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
 },
});

这个错误本质是ES模块中变量在声明前被访问，通常和生产构建时的模块转译、polyfill配置或代码本身的变量声明问题有关，按以下步骤排查修复：

1. 统一开发与生产的模块处理配置 #

Vite开发模式用esbuild，生产用Rollup，两者模块处理逻辑不一致，需要调整配置统一规则：

• 把NodeModulesPolyfills加入插件列表，确保生产构建时能处理Node模块的polyfill
• 仅在生产构建时启用@rollup/plugin-commonjs，避免开发模式冲突
• 替换rollup-plugin-node-polyfills的alias为@esbuild-plugins/node-modules-polyfill，保持前后端一致
• 显式定义process全局变量

修改后的配置示例：

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue2";
import commonjs from "@rollup/plugin-commonjs";
import GlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";

export default defineConfig({
  plugins: [
    vue(),
    GlobalsPolyfills({
      process: true,
      buffer: true,
    }),
    NodeModulesPolyfills(),
    // 仅生产构建启用commonjs插件
    process.env.NODE_ENV === "production" && commonjs({ include: /node_modules/ })
  ].filter(Boolean),
  define: {
    global: "globalThis",
    process: "process"
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "vue-socials": "vue-socials/dist/vue-socials.es.js",
      stream: "@esbuild-plugins/node-modules-polyfill/polyfills/stream",
      zlib: "@esbuild-plugins/node-modules-polyfill/polyfills/zlib",
      util: "@esbuild-plugins/node-modules-polyfill/polyfills/util",
    },
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
  build: {
    rollupOptions: {
      plugins: [commonjs({ include: /node_modules/ })]
    }
  }
});

2. 排查代码中的变量声明问题 #

在项目中搜索所有wat相关代码，检查是否存在let/const变量在声明前被访问的情况，比如：

// 错误示例
console.log(wat);
const wat = "some value";

这种写法在开发模式下可能被esbuild宽松处理，但生产构建时Rollup会严格抛出错误，需调整为变量声明后再使用。

3. 检查第三方依赖兼容性 #

如果代码排查无问题，可能是第三方依赖的模块格式问题：

• 尝试修改vue-socials的alias为CommonJS版本："vue-socials": "vue-socials/dist/vue-socials.common.js"
• 检查stream/zlib/util等polyfill依赖是否在生产构建时被正确引入，必要时更换为更适配Vite的polyfill方案

内容的提问来源于stack exchange，提问作者Fawaz Hutomi Abdurahman