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

20 篇文章 0 订阅

步骤:

1. 项目中安装vue:

npm install vue -S

 2. main.js中引入vue,创建vue实例:

import Vue from 'vue'
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello vue'
  }
});

3.  index.html中加入vue实例挂载的DOM节点:

<div id="app">
  {{msg}}
</div>

 4. 终端执行:

npm run dev

编译成功,但是浏览器中报错: 

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

官方解释:

如果 render 函数和 template property 都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库。

此时我们应该使用runtime-compiler,而不是runtime-only。

官网给出了以下解决办法:

https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6

 在这里我采用在webpack.config.js中增加resolve配置的方式:

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

重新执行npm run dev,刷新页面,不再报错,且页面正常渲染。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值