版權聲明：本文為CSDN博主「twinkle||cll」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41499782/article/details/112505665

vue3 使用第三方插件問題
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"

解釋一下上面的意思：
組件提供模板選項，但是在Vue的這個構建中不支持運行時編譯，配置你的bundler別名 vue： vue/dist/vue.esm-bundler.js

分析原因
vue 的使用環境，分為兩種環境，一種是開發，一種是生產，

• 開發環境下：
  • 如果是vue2的話，需要依賴構建工具，如webpack, glup 等， 流程是 先使用對應的構建工具來進行構建編譯生成一個一個的bundle, 然后才是運行。
  • 如果是vue3的話，有兩種方式，一種是沿用vue2的開發模式，另一種是 使用 vite這個構建工具，流程是 基于現代瀏覽器的特點， 先查找相關的引用，然后在編譯，在運行
• 生成環境，都需要打包生成bundle 進行部署。
  基于vue 的不同環境需要使用的vue的代碼也是不一樣的，如下表：

這個表格來源是 vue-cli 里面介紹的，是指vue 在各個環境下面需要的不一樣的版本，里面的每一個含義，麻煩查看官網，這里不復制黏貼。

解決辦法：
vue3
使用 vite 構建： 項目根目錄下面建立 vite.config.js 配置別名， 詳細配置

alias: {
  'vue': 'vue/dist/vue.esm-bundler.js' // 定義vue的別名，如果使用其他的插件，可能會用到別名
 },

使用 vue-cli 進行構建，項目根目錄下面建立 vue.config.js 配置一個屬性

module.exports = { runtimeCompiler: true } // 確定是運行時候編譯

vue2 ,項目中建立對應的.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})