vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js

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

1. 开发环境下：

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

2. 生成环境，都需要打包生成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')
    })
  ]
})

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