【轉載】vue3 template模版字符串寫法報錯: Component provided template option but runtime compilation is not sup...

【vue3 使用第三方插件問題 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js】

原文鏈接：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 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 的使用環(huán)境闯睹，分為兩種環(huán)境，一種是開發(fā)他匪，一種是生產割疾，

開發(fā)環(huán)境下：

如果是vue2的話侧纯，需要依賴構建工具，如webpack, glup 等碍讨，流程是先使用對應的構建工具來進行構建編譯生成一個一個的bundle, 然后才是運行治力。
如果是vue3的話，有兩種方式垄开，一種是沿用vue2的開發(fā)模式琴许，另一種是使用 vite這個構建工具，流程是基于現(xiàn)代瀏覽器的特點溉躲，先查找相關的引用榜田，然后在編譯，在運行

生成環(huán)境锻梳，都需要打包生成bundle 進行部署箭券。

基于vue 的不同環(huán)境需要使用的vue的代碼也是不一樣的，如下表：

UMD CommonJS    ES Module (for bundlers)    ES Module (for browsers)
Full    vue.js  vue.common.js   vue.esm.js  vue.esm.browser.js
Runtime-only    vue.runtime.js  vue.runtime.common.js   vue.runtime.esm.js  -
Full (production)   vue.min.js  -   -   vue.esm.browser.min.js
Runtime-only (production)   vue.runtime.min.js  -   -   -

這個表格來源是 vue-cli 里面介紹的疑枯，是指vue 在各個環(huán)境下面需要的不一樣的版本辩块，里面的每一個含義，麻煩查看官網(wǎng)，這里不復制黏貼废亭。

解決辦法：

【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
  webpack

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')
    })
  ]
})

效果：不報警告了，插件也可以使用了