关于vue编译版本引入的问题的解决

 更新时间:2018年09月17日 10:12:39   作者:飘飘然  
这篇文章主要介绍了关于vue编译版本引入的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

下班过目遇到一个错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

根据错误提示说明,和搜索之后得出结论:是项目引入的vue编译版本不对

解决方案1

build/webpack.base.conf.js 并设置vue的alias别名,如下:

1
2
3
4
5
resolve: {
   alias: {
    vue: 'vue/dist/vue.esm.js'
   }
  }

解决方案2

打开src/main.js修改Vue对象初始化。

1
2
3
4
5
6
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

改为

1
2
3
4
5
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

原因是,使用 template属性,需要引入带编译器的完整版的vue.esm.js

而如果在.vue文件里面使用

1
2
3
4
5
6
7
8
9
10
11
<template>
 <div></div>
</template>
<script>
export default {
 name:'name1',
 data() {
  return {};
 }
};
</script>

这种形式,然后使用import引入,则不需要完整版的vue.esm.js,因为使用vue-loader时 *.vue文件会自动预编译成js。

其实vuejs官网中已有明确说明

对不同构建版本的解释(https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A

其他相关文章:

理顺8个版本vue的区别(https://www.jb51.net/article/147538.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://segmentfault.com/a/1190000016417861

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue3中如何修改父组件传递到子组件中的值(全网少有!)

    Vue3中如何修改父组件传递到子组件中的值(全网少有!)

    大家都知道,vue是具有单向数据流的传递特性,下面这篇文章主要给大家介绍了关于Vue3中如何修改父组件传递到子组件中值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Ant Design of Vue的树形控件Tree的使用及说明

    Ant Design of Vue的树形控件Tree的使用及说明

    这篇文章主要介绍了Ant Design of Vue的树形控件Tree的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 解决vue cli使用typescript后打包巨慢的问题

    解决vue cli使用typescript后打包巨慢的问题

    这篇文章主要介绍了解决vue cli使用typescript后打包巨慢的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    这篇文章主要介绍了vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • element-plus 下拉框实现全选的示例代码

    element-plus 下拉框实现全选的示例代码

    本文主要介绍了element-plus 下拉框实现全选的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Vue 中使用 CSS Modules优雅方法

    Vue 中使用 CSS Modules优雅方法

    这篇文章主要介绍了Vue 中使用 CSS Modules优雅方法,本文文字结合实例代码的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    这篇文章主要介绍了vue项目 使用Hbuilder打包app 设置沉浸式状态栏的方法,本文通过实例代码效果图展示给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vue3中实现拖拽排序代码示例(vue-draggable-next的使用)

    vue3中实现拖拽排序代码示例(vue-draggable-next的使用)

    在Vue3中使用拖拽功能时应选用vue-draggable-next插件,传统的draggable插件不兼容Vue3,可能导致TypeError错误,安装后,需在项目中引入并使用,具体步骤包括安装插件、引入使用、查看效果和相关说明,需要的朋友可以参考下
    2024-09-09
  • vue如何修改data中数据问题

    vue如何修改data中数据问题

    这篇文章主要介绍了vue如何修改data中数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue进阶之CodeMirror的应用小结

    Vue进阶之CodeMirror的应用小结

    CodeMirror支持在线编辑代码,风格包括js, java, php, c++等等100多种语言,下面这篇文章主要来和大家讲讲CodeMirror的应用,感兴趣的可以了解一下
    2023-06-06

最新评论