如何判断Vue在开发模式下基于Vite还是Webpack运行？

可以通过以下几种方式在Vue组件内区分当前是Vite还是Webpack构建环境：

1. 手动注入自定义环境变量（推荐） #

这是最稳妥的方案，完全可控，不依赖构建工具的内部实现：

• Webpack端配置：在webpack.config.js中使用DefinePlugin注入全局标识

  // webpack.config.js
  const webpack = require('webpack');
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        __WEBPACK_BUILD__: JSON.stringify(true),
      }),
    ],
  };
  

• Vite端配置：在vite.config.js中通过define选项注入全局标识

  // vite.config.js
  export default {
    define: {
      __VITE_BUILD__: JSON.stringify(true),
    },
  };
  

• Vue组件内判断：直接读取注入的变量做逻辑分支

  // Vue组件的script部分
  if (typeof __VITE_BUILD__ !== 'undefined' && __VITE_BUILD__) {
    // 执行Vite环境下的递归组件逻辑
  } else if (typeof __WEBPACK_BUILD__ !== 'undefined' && __WEBPACK_BUILD__) {
    // 执行Webpack环境下的递归组件逻辑
  }
  

2. 利用构建工具的原生全局标识 #

• Vite环境识别：Vite默认会暴露import.meta对象，Webpack默认无此对象（除非手动配置支持），可以直接判断：

  if (typeof import.meta !== 'undefined') {
    // Vite环境逻辑
  } else {
    // Webpack环境逻辑
  }
  

  注意：如果Webpack项目配置了ES模块支持，这个方法可能失效，建议搭配自定义变量使用。

3. 检查构建工具的内部变量（不推荐，有版本风险） #

Webpack构建后会生成__webpack_modules__这类内部全局变量，可以通过它判断，但该变量属于内部实现，可能随Webpack版本更新变化：

if (typeof __webpack_modules__ !== 'undefined') {
  // Webpack环境逻辑
} else {
  // Vite环境逻辑
}

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