Vue2迁移Vue3使用vue/compat遇运行时编译警告，求解决方案

核心问题在于：使用vue/compat兼容层时，需要启用运行时编译，但不能直接使用常规Vue 3的vue.esm-bundler.js，而是要使用兼容层专属的带编译功能的构建包。

解决方案 #

将vue的别名指向**vue/dist/vue.esm-bundler-compat.js**——这是官方为vue/compat准备的、同时支持兼容API和运行时编译的构建版本。

各构建工具配置示例 #

Vite

修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler-compat.js'
    }
  },
  define: {
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false
  }
})

Webpack

修改webpack.config.js：

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler-compat.js'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    })
  ]
}

Vue CLI

修改vue.config.js：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm-bundler-compat.js'
      }
    },
    plugins: [
      new require('webpack').DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false
      })
    ]
  }
})

额外注意事项 #

• 确保已安装正确依赖：

  npm install vue@latest @vue/compat
  

• 若组件使用的是单文件组件（.vue）的<template>标签，构建工具插件（如@vitejs/plugin-vue、vue-loader）默认会处理模板编译，此配置主要解决组件内直接写template选项的场景。

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