美文网首页
【转载】vue3 template模版字符串写法报错: Comp

【转载】vue3 template模版字符串写法报错: Comp

作者: 7b7d23d16ab5 | 来源:发表于2021-05-29 10:43 被阅读0次

    【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

    相关文章

      网友评论

          本文标题:【转载】vue3 template模版字符串写法报错: Comp

          本文链接:https://www.haomeiwen.com/subject/zgsysltx.html