Vue3封装构建适配遗留Vue2应用遇问题，求解决方案

问题背景 #

已完成大型Vue2应用的部分Vue3升级，通过编译Vue3 wrapper在遗留Vue2应用中新增功能，无需升级现有Vue2组件（迁移成本过高）。目前wrapper编译成功，但部署到遗留应用后无法正常工作，需求是构建产物需合并为单个文件。

先解决构建配置中的致命错误 #

你的vue.config.js里有个逻辑矛盾的条件判断：if (isProduction && wrapperBuild && !wrapperBuild)，这行永远不会执行，导致生产环境下wrapper的优化配置完全失效。以下是修正后的完整配置，同时优化了打包逻辑以满足单文件需求：

const TerserPlugin = require('terser-webpack-plugin')
const path = require('path')

const { WRAPPER_BUILD = false } = process.env
const wrapperBuild = WRAPPER_BUILD === 'true'

console.log({ WRAPPER_BUILD, wrapperBuild })

module.exports = {
  outputDir: path.resolve(__dirname, wrapperBuild ? 'lib_dist' : 'dist'),
  transpileDependencies: true,
  productionSourceMap: false,
  publicPath: wrapperBuild ? '/vue_dist/' : '/pages/',

  devServer: {
    allowedHosts: 'all',
    https: true,
  },
  css: {
    loaderOptions: {
      sass: {
        // Vue CLI 4+版本里sass-loader全局导入要用prependData，不是data，原配置可能导致样式加载失败
        prependData: "@import '@/assets/styles/scss/main.scss';",
      },
    },
  },
  configureWebpack: (config) => {
    const isProduction = process.env.NODE_ENV === 'production'

    config.devtool = isProduction && wrapperBuild ? 'source-map' : 'inline-source-map'

    // 修正条件：仅生产环境+wrapper构建时启用压缩和单文件打包
    if (isProduction && wrapperBuild) {
      config.optimization = {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            test: /\.(js|ts|vue)(\?.*)?$/i,
            extractComments: true,
            terserOptions: {
              compress: {
                drop_console: true,
                dead_code: true,
                drop_debugger: true,
              },
            },
          }),
        ],
        // 禁用代码分割，强制所有代码打包到单个文件
        splitChunks: false,
        runtimeChunk: false,
      }
    } else {
      config.optimization = {
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            default: false,
            vendors: false,
          },
        },
      }

      config.entry = './src/static_app_wrapper/main.js'

      config.output = {
        ...config.output,
        filename: wrapperBuild ? 'main-wrapper-[contenthash].js' : 'main-[contenthash].js',
        chunkFilename: '[name]-[contenthash].js',
        libraryTarget: 'umd',
        // 给Vue3 wrapper指定唯一全局变量名，避免和Vue2的Vue全局变量冲突
        library: 'Vue3Wrapper',
        umdNamedDefine: true,
      }
    }
  },
}

配置关键调整点：

• 修复sass-loader的全局导入选项，避免样式加载失败
• 生产环境构建wrapper时，禁用splitChunks和runtimeChunk，强制所有代码合并到单个文件
• 为UMD包指定全局变量名Vue3Wrapper，彻底避免和Vue2的全局变量冲突

构建脚本优化 #

原脚本可以保留，建议加个错误捕获，方便排查问题：

{
  "scripts": {
    "build:wrapper": "WRAPPER_BUILD=true vue-cli-service build && cpx './lib_dist/*' ../legacy/webroot/vue_dist -C -v || echo '构建/复制环节出错'"
  }
}

遗留Vue2应用集成步骤 #

1. 在遗留应用的HTML中按顺序加载脚本：先加载Vue2，再加载Vue3 wrapper的构建文件

<!-- 遗留应用原有的Vue2脚本 -->
<script src="/path/to/vue2.js"></script>
<!-- 打包好的Vue3 wrapper -->
<script src="/vue_dist/main-wrapper-xxx.js"></script>

2. 在Vue2应用中挂载Vue3 wrapper：

// 假设你的Vue3 wrapper暴露了mount方法，传入挂载容器的选择器即可
Vue3Wrapper.mount('#vue3-wrapper-container')

Vue3与Vue2共存的进阶优化 #

如果想减小wrapper的体积，可以把Vue3从打包产物中剥离，单独在遗留应用中加载：

1. 在configureWebpack的isProduction && wrapperBuild分支里添加：

config.externals = {
  vue: 'Vue'
}

2. 在遗留应用中加载Vue3的UMD版本（注意如果Vue2已经占用了Vue全局变量，要换个变量名，比如用Vue3）：

<!-- 加载Vue3的UMD包，指定全局变量名Vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js" crossorigin></script>
<script>
// 把Vue3赋值给externals中指定的Vue变量
window.Vue = window.Vue3
</script>

其他可选方案 #

如果上述配置仍有问题，可以尝试用vue-demi库编写兼容Vue2/Vue3的组件，但需要调整wrapper的代码结构，适合需要同时适配两个版本的场景，不过你的需求是Vue3 wrapper嵌入Vue2应用，优先推荐上述UMD打包方案。

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