首页 > 其他分享 >Uncaught ReferenceError: Vue is not defined(之一)

Uncaught ReferenceError: Vue is not defined(之一)

时间:2022-11-20 18:35:19浏览次数:49  
标签:Vue defined CDN vue 文档 Uncaught 报错

报错信息

Uncaught ReferenceError- Vue is not defined

报错代码示例

<body>
  <div id="app">
    <span>{{ username }}</span>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
  
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'zhangsan'
      }
    })
  </script>
</body>

问题解决

① 网上说法

  网上是说法是什么new Vue的Vue要大写开头、什么没引入vue文件等等,单貌似都没有问题。

② 尝试解决

  迫于无奈,我不得不为一个测试案例引入一个离线的vue,结果成功了。

  <script src="./lib/vue-2.6.14.js"></script>

③ 问题分析

  vue2官方文档的vue文件是挂载在 jsdelivr 这个CDN上的。然而在2021年12月20日,JsDelivr不再提供国内CDN加速改为全球加速。

  所以导致vue文件加载失败,从而发生报错。

④ 解决方法

  • 使用离线下载的vue文件
  • 使用其他的CDN(BootCDN、Staticfile、unpkg等等)

总结发现

  通过查阅vue2官方文档和vue3的官方文档,细心的人可能已经发现,vue3官方文档已经将vue文件转而挂载在 unpkg 上了

<script src="https://unpkg.com/vue@3"></script>

标签:Vue,defined,CDN,vue,文档,Uncaught,报错
From: https://www.cnblogs.com/wangyb56/p/16909138.html

相关文章

  • vue3和vue2的区别
    1、vue3完全支持typescript,提高项目的可维护性2、Fragment:模板更简单。vue3用到了一个虚拟的父级,可以多个根节点domvue2只能有一个父级节点3、vue2用newVue();vu......
  • springboot+vue 前后端分离项目对 token 的无痛刷新
    前言最近在做一个系统时,使用了token令牌来进行前后端交互的权限认证。token一般用于前端向后端发起请求时的权限认证。用户登录自己的账号后,会得到一个token,放在每......
  • vue指令
    1、文本类指令{{}}、v-text 都是用于绑定节点的文本; 二者区别:{{}}这种绑定值的方式在页面会出现“{{}}”一闪而过的效果解决{{}}在页面出现一......
  • Vue知识 - 关闭项目 ESlint 校验
    如果控制台包该类型错误: 解决方法:关闭ESlint代码规范校验首先找到vue项目下的vue.config.js  在vue.config.js文件中加入lintOnSave:false将校验设置为false关闭,即可 ......
  • vue项目:系统禁用脚本
    创建vue项目时,提示禁用的脚本需要操作:管理员身份打开PowerShell 运行命令“set-ExecutionPolicyRemoteSigned”(set-ExecutionPolicyRemoteSigned(签名或运行这些脚本......
  • vue+JS 获取当前实时时间
    <template><divclass="container"><divclass="header"><h1>数据可视化-Echarts</h1><divclass="show-time">当前时间: {{......
  • vue 本地储存 (localStorage)
    setItem(name,value,expires){if(!localStorage){console.log('unsupportlocalStorage');return;}varobj={};obj.value=value;if(expires)......
  • vue 中 使用flexible+rem 实现页面元素 随窗口大小自适应w
      1.引入flexible.js   这个适用于ui图1920px  其他大小需对应调整flexible.js把屏幕分为24等份 把下面的代码复制到项目中  新建一个js文件(func......
  • vue3 基础-API-computed
    API-computed基本使用前些章节讲了一些常用的api如setup,ref,reactive,toRef...等,并以一个todoList的小案例来体现在vue3中如何进行......
  • vue3 基础-API-watch 和 watchEffect
    watch和watchEffect前篇对computed属性如何在api中基本使用,即从vue中引入,然后通过直接传函数或者传对象的方式,开箱即用,非常清晰易......