使用webpack安装vue,import之后,运营项目报错,如下:

[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有两种形式的代码compiler(模板)模式,和runtime模式(运行时),vue模板的package.json中的main字段默认为runtime模式,指向的是'dist/vue.runtime.common.js'位置。

这是vue升级2.0之后就有的特点;如果main.js中,初始化vue这样写,这种形式compiler模式,所以就会出现上面的错误信息;

new Vue({
el:'#app',
template:'<App/>',
components:{App}
});

解决办法:

1 修改Vue实例的写法:

new Vue({
  render:h=>h(App)
}).$mount('#app');

用vue-cli搭建的项目没有问题,原因是webpack配置文件中有个别名配置:

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的 } }

也就是说import Vue from 'vue' 这行代码被解析为import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置,没有使用main字段默认的文件位置

在vue-cli3中需要配置:

configureWebpack: { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }

或者直接这样写:

import Vue from 'vue/dist/vue.esm.js

来自:https://blog.csdn.net/wxl1555/article/details/83187647

webpack 安装vue(两种代码模式compiler 和runtime)的更多相关文章

  1. Vue路由器的hash和history两种工作模式 && Vue项目编译部署

    1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...

  2. 一步一步学FRDM-KE02Z(一):IAR调试平台搭建以及OpenSDA两种工作模式设置

    摘要:FRDM-KE02Z是飞思卡尔公司较为新的微控制器,学习和开发资料较少.从本篇开始会陆续介绍其相关的开发流程,并完成一个小型的工程项目.这是本系列博客的第一篇,主要介绍开发环境IAR for A ...

  3. java web学习总结(二十九) -------------------JavaBean的两种开发模式

    SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...

  4. ASP.Net的两种开发模式

    一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...

  5. javaweb学习总结(二十一)——JavaWeb的两种开发模式

    SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...

  6. JAVA学习篇--JAVA两种编程模式控制

    在Drp项目中,解说了两种编程模式Model 1和Model2.以下是对这两种模式的简单理解.以及因为Model2是基于MVC架构的模式,就将我们易混淆的MVC与我们之前学的三层架构进行对照学习一下. ...

  7. 咸鱼入门到放弃10--javaweb的两种开发模式

    (本篇是之前方法的综合使用,新东西不多,其中也涉及三层架构的问题.此处直接引用了大佬blog:https://www.cnblogs.com/xdp-gacl/p/3908610.html) SUN公 ...

  8. LR两种录制模式的区别

    loadrunner的录制模式分为如下两种录制模式: HTML-based script,也称为高层录制: URL-based script,也称为底层录制. 两种录制模式的区别:1)脚本不同:高层录 ...

  9. JavaWeb学习 (二十)————JavaWeb的两种开发模式

    一.JSP+JavaBean开发模式 1.1.jsp+javabean开发模式架构 jsp+javabean开发模式的架构图如下图(图1-1)所示

随机推荐

  1. DBUtils框架ResultSetHandler接口学习

    今儿在学习spring框架的时候,让我想起来之前做项目时一直搁置的一个问题,就是DBUtils框架的做数据库操作的使用,当时制作项目的时候就是通过实例打了一遍,由于时间原因也并没有仔细去了解这一方面. ...

  2. ES 调优查询亿级数据毫秒级返回!怎么做到的?--文件系统缓存

    一道面试题的引入: 如果面试的时候碰到这样一个面试题:ElasticSearch(以下简称ES) 在数据量很大的情况下(数十亿级别)如何提高查询效率? 这个问题说白了,就是看你有没有实际用过 ES,因 ...

  3. 查看java的jar包源码

    1.jd-gui (windows环境) 下载地址 https://files.cnblogs.com/files/indifferent/jd-gui-windows-1.5.1.zip 下载并解压 ...

  4. learning java AWT widowEvent and MouseEvent

    import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import jav ...

  5. HIVE 乱码以及 HUE SQL 语句兼容性的记录(遇到应该会一直更新)

    最近在 HUE 里面查询有中文字段相关的东西被报错警告... (1366, Incorrect string value: \\xE4\\xBA\\xAC\\xE4\\xB8\\x9C... for ...

  6. 教你用WordPress搭建个人博客

    1. 购买VPS,推荐几个供应商: 国外的有:搬瓦工 VirMach vps.net vultr.com 等等 国内的有:阿里云 腾讯云 等等 2. 注册域名:阿里云 腾讯云 3. 下载安装PuTTy ...

  7. java连数据库和数据库连接池踩坑日记(一)-------oracle连接的一些问题

    最近接触oracle有点多,同时也在配置数据库连接池,坑也就踩多了,记录下. 事情还没有结束,没时间记录问题,很多事情都忘了,过了国庆再写的话可能就真的全忘了吧……而且不单单是数据库问题,还有一些数据 ...

  8. 第2组 团队Git现场编程实战

    目录 组员职责分工(1 2分) github 的提交日志截图(2 1分) 程序运行截图(3 3分) 程序运行环境(4 1分) GUI界面(5 5分) 基础功能实现(6 10分) 鼓励有想法且有用的功能 ...

  9. [CMS]Joomla 3.4.6-RCE漏洞复现

    0x00:简介 1.Joomla是一套全球有名的CMS系统. 2.Joomla基于PHP语言加上MySQL数据库所开发出来的WEB软件系统,目前最新版本是3.9.12. 3.Joomla可以在多种不同 ...

  10. 2019软工实践_Alpha(1/6)

    队名:955 组长博客:https://www.cnblogs.com/cclong/p/11841141.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...