webpack 安装vue(两种代码模式compiler 和runtime)
使用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)的更多相关文章
- Vue路由器的hash和history两种工作模式 && Vue项目编译部署
1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...
- 一步一步学FRDM-KE02Z(一):IAR调试平台搭建以及OpenSDA两种工作模式设置
摘要:FRDM-KE02Z是飞思卡尔公司较为新的微控制器,学习和开发资料较少.从本篇开始会陆续介绍其相关的开发流程,并完成一个小型的工程项目.这是本系列博客的第一篇,主要介绍开发环境IAR for A ...
- java web学习总结(二十九) -------------------JavaBean的两种开发模式
SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...
- ASP.Net的两种开发模式
一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...
- javaweb学习总结(二十一)——JavaWeb的两种开发模式
SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...
- JAVA学习篇--JAVA两种编程模式控制
在Drp项目中,解说了两种编程模式Model 1和Model2.以下是对这两种模式的简单理解.以及因为Model2是基于MVC架构的模式,就将我们易混淆的MVC与我们之前学的三层架构进行对照学习一下. ...
- 咸鱼入门到放弃10--javaweb的两种开发模式
(本篇是之前方法的综合使用,新东西不多,其中也涉及三层架构的问题.此处直接引用了大佬blog:https://www.cnblogs.com/xdp-gacl/p/3908610.html) SUN公 ...
- LR两种录制模式的区别
loadrunner的录制模式分为如下两种录制模式: HTML-based script,也称为高层录制: URL-based script,也称为底层录制. 两种录制模式的区别:1)脚本不同:高层录 ...
- JavaWeb学习 (二十)————JavaWeb的两种开发模式
一.JSP+JavaBean开发模式 1.1.jsp+javabean开发模式架构 jsp+javabean开发模式的架构图如下图(图1-1)所示
随机推荐
- 几个方便的基于es 的开源文档索引系统
Apache Tika 比较有名的内容提取工具 FsCrawler 使用java 开发,内部使用了Tika Ambar nodejs,python应用开发,轻量,支持基于docker 的快速部署,同时 ...
- 【概率论】5-7:Gama分布(The Gamma Distributions Part I)
title: [概率论]5-7:Gama分布(The Gamma Distributions Part I) categories: - Mathematic - Probability keywor ...
- vimset
vim ~./vimrc vim /etc/vim/vimrc set nocompatible "去掉有关vi一致性模式,避免以前版本的bug和局限 se ...
- C语言 memset函数及其用法
定义 void *memset(void *s, int c, unsigned long n); 描述 将指针变量 s 所指向的前 n 字节的内存单元用一个“整数” c 替换,注意 c 是 int ...
- python3 枚举定义和使用
定义 在某些情况下,一个类的对象是有限且固定的,比如季节类,它只有 4 个对象:再比如行星类,目前只有 8 个对象.这种实例有限且固定的类,在 Python 中被称为枚举类.程序有两种方式来定义枚举类 ...
- 安装 PHP 镜像
安装 PHP 镜像 方法一.通过 Dockerfile 构建 创建Dockerfile 首先,创建目录php-fpm,用于存放后面的相关东西. runoob@runoob:~$ mkdir -p ~/ ...
- OpenFOAM显示残差
本文主要讲解两种方法用来显示OpenFOAM的计算残差,一种是采用OpenFOAM自带的foamMonitor来输出残差,另一种就是大家经常看见的采用pyFoam来输出残差.不管采用哪一种方法都必须安 ...
- 3、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...
- 无法将“Scaffold-DbContext”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...
原文链接:https://my.oschina.net/taadis/blog/889560 为什么80%的码农都做不了架构师?>>> PM> Scaffold-DbC ...
- Control.ImeMode属性简释
在WINFORM中,我们经常遇到如下问题.文本输入框中输入法有时候需要被禁用,或者某些时候全半角输入自动转换.查阅相关资料,现小结如下. (一)Control.ImeMode 属性:获取或设置控件的输 ...