【转载】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 的使用环境，分为两种环境，一种是开发，一种是生产，

开发环境下：

如果是vue2的话，需要依赖构建工具，如webpack, glup 等， 流程是 先使用对应的构建工具来进行构建编译生成一个一个的bundle, 然后才是运行。
如果是vue3的话，有两种方式，一种是沿用vue2的开发模式，另一种是 使用 vite这个构建工具，流程是 基于现代浏览器的特点， 先查找相关的引用，然后在编译，在运行

生成环境，都需要打包生成bundle 进行部署。

基于vue 的不同环境需要使用的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 在各个环境下面需要的不一样的版本，里面的每一个含义，麻烦查看官网，这里不复制黏贴。

解决办法：

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

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

原文链接：https://blog.csdn.net/qq_41499782/article/details/112505665