Configure your bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js“

在用 vue-cli 或者 Vite 创建的 Vue 项目里使用字符串传递给 template 选项的组件的时候

const Profile = {
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data() {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
}

控制台会有警告：

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"

这个警告的意思是：组件提供 template 选项，但是在Vue的这个构建中不支持运行时编译，在你的打包工具里配置别名“vue： vue/dist/vue.esm-bundler.js”。

分析原因

项目的 vue/dist 目录下有很多不同的 Vue.js 构建版本，不同的环境使用不同的构建版本。使用构建工具的情况下，默认使用的是 vue.runtime.esm-bundler.js 这个仅运行时版本，不能处理 template 选项是字符串的情况，template 选项是字符串的情况要使用包含运行时编译器的版本 vue.esm-bundler.js。

Vue 官网对这一块解释的很详细了，请见。

 解决办法：

vue3

• 使用vite 构建： 项目根目录下面建立 vite.config.js配置别名

alias: {
   'vue': 'vue/dist/vue.esm-bundler.js'
},

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