使用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. 几个方便的基于es 的开源文档索引系统

    Apache Tika 比较有名的内容提取工具 FsCrawler 使用java 开发,内部使用了Tika Ambar nodejs,python应用开发,轻量,支持基于docker 的快速部署,同时 ...

  2. 【概率论】5-7:Gama分布(The Gamma Distributions Part I)

    title: [概率论]5-7:Gama分布(The Gamma Distributions Part I) categories: - Mathematic - Probability keywor ...

  3. vimset

    vim ~./vimrc  vim /etc/vim/vimrc set nocompatible                 "去掉有关vi一致性模式,避免以前版本的bug和局限 se ...

  4. C语言 memset函数及其用法

    定义 void *memset(void *s, int c, unsigned long n); 描述 将指针变量 s 所指向的前 n 字节的内存单元用一个“整数” c 替换,注意 c 是 int ...

  5. python3 枚举定义和使用

    定义 在某些情况下,一个类的对象是有限且固定的,比如季节类,它只有 4 个对象:再比如行星类,目前只有 8 个对象.这种实例有限且固定的类,在 Python 中被称为枚举类.程序有两种方式来定义枚举类 ...

  6. 安装 PHP 镜像

    安装 PHP 镜像 方法一.通过 Dockerfile 构建 创建Dockerfile 首先,创建目录php-fpm,用于存放后面的相关东西. runoob@runoob:~$ mkdir -p ~/ ...

  7. OpenFOAM显示残差

    本文主要讲解两种方法用来显示OpenFOAM的计算残差,一种是采用OpenFOAM自带的foamMonitor来输出残差,另一种就是大家经常看见的采用pyFoam来输出残差.不管采用哪一种方法都必须安 ...

  8. 3、vueJs基础知识03

    vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...

  9. 无法将“Scaffold-DbContext”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...

    原文链接:https://my.oschina.net/taadis/blog/889560 为什么80%的码农都做不了架构师?>>>     PM> Scaffold-DbC ...

  10. Control.ImeMode属性简释

    在WINFORM中,我们经常遇到如下问题.文本输入框中输入法有时候需要被禁用,或者某些时候全半角输入自动转换.查阅相关资料,现小结如下. (一)Control.ImeMode 属性:获取或设置控件的输 ...