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

Logo

前往低代码交流专区

更多推荐