在升级脚手架到vue-cli3.0版本的时候出现了这个报错:

[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模式的,所以就会出现上面的错误信息

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

解决办法

将main.js中的代码修改如下就可以

//runtime

new Vue({
router,
store,
render: h => h(App)
}).$mount("#app")

到这里我们的问题还没完,那为什么之前是没问题的,之前vue版本也是2.x的呀?

这也是我要说的第二种解决办法

因为之前我们的webpack配置文件里有个别名配置,具体如下

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

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

所以第二种解决方法就是,在vue.config.js文件里加上webpack的如下配置即可,

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

既然到了这里我想很多人也会想到第三中解决方法,那就是在引用vue时,直接写成如下即可

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

You are using the runtime-only build of Vue where the template compiler is not available. Either pre的更多相关文章

  1. You are using the runtime-only build of Vue where the template compiler is not available.

    使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...

  2. 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.

    异常 You are using the runtime-only build of Vue where the template compiler is not available. Either ...

  3. [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.

    转载自:https://segmentfault.com/a/1190000006435886 解决办法:添加package.config.js配置文件中,添加本文章的红色部分代码 import vu ...

  4. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

    原文链接https://blog.csdn.net/xiaomajia029/article/details/88320233 问题描述: 原因分析:在项目配置的时候,默认 npm 包导出的是运行时构 ...

  5. Vue项目用了脚手架vue-cli3.0,会报错You are using the runtime-only build of Vue where the template compiler is not available.....

    摘自: https://blog.csdn.net/wxl1555/article/details/83187647 报错信息如下图: 报错原因是:vue有两种形式的代码:一种是compiler(模版 ...

  6. Vue Cli 报错:You are using the runtime-only build of Vue where the template compiler is not availabl

    报错原因: 这里引用的是vue.runtime.esm.js,造成的不能正常运行. vue-cli 2.x 解决方法: 在webpack.base.conf.js配置文件中多加了一段代码,将 vue/ ...

  7. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

  8. eclipse中build path 中JDK与java compiler compliance level的问题(转)

    roject facets做什么用? http://baike.baidu.com/view/6257360.htm,其实我感觉,就是让我们在创建项目时候,可以独立定义一个有一个模板供我们使用,在里面 ...

  9. WebStorm 使用webpack打包(build) Vue 静态资源无法访问(路径不对)问题

    在WebStorm中使用webpack打包 (命令npm run build) 后生成在项目的dist目录下,在浏览器打开,静态资源js.css等无法加载.因为打包时,资源使用了绝对路径. 解决: 打 ...

随机推荐

  1. [ipsec][strongswan] VirtualPN隧道网络加速FEC(forward error correction)

    引用 跟一个网友就有关IPsec的网络加速以及降低延迟等问题进行了一些讨论,并总结了一写粗浅的看法. 因为FEC的资料并不多,所以分享出来,希望能被有需要的人看见:) 先说一下FEC. 我们使用ips ...

  2. Alluxio : 开源分布式内存文件系统

    Alluxio : 开源分布式内存文件系统 Alluxio is a memory speed virtual distributed storage system.Alluxio是一个开源的基于内存 ...

  3. 《代码敲不队》第九次团队作业:Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 (1)掌握软件测试基础技术(2)学习迭代式增量软件开发过程(Scrum) ...

  4. react 学习记录

    1.  脚手架搭建项目  create-react-app https://www.jianshu.com/p/d196761c8332 2. UI框架 https://ant.design/docs ...

  5. 超实用的JQuery小技巧

    JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程. 今天我们总结了下平常项目中用到的一些小技巧,仅供参考. 1.替换元素 //替换元素 $(docume ...

  6. Django 第一天 开端

    今日内容: 一.HTTP协议 1.HTTP协议简介 参考博客:https://www.cnblogs.com/clschao/articles/9230431.html 是超文本传输协议 现在使用最广 ...

  7. postgresql Kill掉正在执行的SQL语句

    kill方式是杀掉进程,但是有时候需要取消相关SQL语句,采用以下方式 一.查看哪些SQL语句正在执行 语句如下:SELECT datname,procpid,query_start, current ...

  8. H3CNE学习5 STP

    一.STP 1.概念 2.STP开机默认会运行 二.STP操作 1.原理 2.根桥选举,首先比前面的ID,谁小谁就是根桥,如果ID一样就比较mac,谁小谁就是根桥 可以手动修改优先级,图中可以将swA ...

  9. Kubernetes 学习19基于canel的网络策略

    一.概述 1.我们说过,k8s的可用插件有很多,除了flannel之外,还有一个流行的叫做calico的组件,不过calico在很多项目中都会有这个名字被应用,所以他们把自己称为project cal ...

  10. Kubernetes 学习6 Pod控制器应用进阶

    一.资源配置清单 1.自主式Pod资源 2.资源的清单格式,大多数清单格式都遵循如下条件: a.一级字段:apiVersion(group/version),kind,metadata(name,na ...