Configure your bundler to alias “vue“ to “vue/dist/“

时间：2025-04-07 21:30:18

在用 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/"

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

分析原因

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

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

 解决办法：

vue3

  • 使用vite 构建： 项目根目录下面建立 配置别名
alias: {
   'vue': 'vue/dist/'
},
  • 使用vue-cli 进行构建，项目根目录下面建立  配置一个属性
 = { 
  runtimeCompiler: true  // 运行时编译
}

vue2, 项目中建立对应的.

  • webpack
 = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/' // 用 webpack 1 时需用 'vue/dist/'
    }
  }
}
  • Rollup
const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': ('vue/dist/')
    })
  ]
})

相关文章