版本问题导致导入vue报错：Uncaught TypeError: Vue is not a constructor

解孔明

已于 2023-04-13 16:25:46 修改

阅读量3k

点赞数 1

分类专栏： bug征途文章标签： vue.js javascript 前端

于 2023-04-12 23:17:51 首次发布

本文链接：https://blog.csdn.net/qq_41623592/article/details/130117674

版权

bug征途专栏收录该内容

4 篇文章 0 订阅

订阅专栏

版本问题导致导入vue报错：Uncaught TypeError: Vue is not a constructor

浏览器控制台错误信息
问题代码
某博客带来的启发
解决方案
附录
- vue2生产环境部分代码
- vue3生产环境部分代码

浏览器控制台错误信息

在这里插入图片描述

vue_start.html:13 Uncaught TypeError: Vue is not a constructor
    at vue_start.html:13
(匿名) @ vue_start.html:13

问题代码

初学vue，按照教程指示配置vue生产环境https://cdn.jsdelivr.net/npm/vue,复制源码，粘贴到本地创建的js/vue-prod.js中，创建vue_start.html文件，编辑html内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="js/vue-prod.js"></script>
    <script>
        var vue = new Vue()
        console.log(vue)
    </script>
</body>

</html>

因为这里没有写任何的显示代码所以页面显示的是空白
因为这里有控制台输出语句，所以打开控制台查看是否输出了vue对象
但是很遗憾，预期在控制台看到vue对象的结果没有出现，反而出现了文章开头的错误

某博客带来的启发

博客内容不用多看，看提供思路的解决方案：
博客部分内容截图

解决方案

受上述博客启发，在环境代码地址https://cdn.jsdelivr.net/npm/vue后面加上‘@2’，变为https://cdn.jsdelivr.net/npm/vue@2,重新复制页面内容，替换js/vue-prod.js内容，刷新浏览器，可以看到控制台输出了vue对象
在这里插入图片描述

附录

vue2生产环境部分代码

/*!
 * Vue.js v2.7.14
 * (c) 2014-2022 Evan You
 * Released under the MIT License.
 */
/*!
 * Vue.js v2.7.14
 * (c) 2014-2022 Evan You
 * Released under the MIT License.
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Vue=e()}(this,(function(){"use strict";var t=Object.freeze({}),e=Array.isArray;function n(t){return null==t}function r(t){return null!=t}function o(t){return!0===t}function i(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function a(t){return"function"==typeof t}function s(t){return null!==t&&"object"==typeof t}var c=Object.prototype.toString;function u(t){return"[object Object]"===c.call(t)}function l(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function f(t){return r(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function d(t){return null==t?"":Array.isArray(t)||u(t)&&t.toString===c?JSON.stringify(t,null,2):String(t)}function p(t){var e=parseFloat(t);return isNaN(e)?t:e}function v(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return e?function(t){return n[t.toLowerCase()]}:function(t){return n[t]}}var h=v("slot,component",!0),m=v("key,ref,slot,slot-scope,is");function g(t,e){var n=t.length;if(n){if(e===t[n-1])return void(t.length=n-1);var r=t.indexOf(e);if(r>-1)return t.splice(r,1)}}var y=Object.prototype.hasOwnProperty;function _(t,e){return y.call(t,e)}function b(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var $=/-(\w)/g,w=b((function(t){return t.replace($,(function(t,e){return e?e.toUpperCase():""}))})),x=b((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),C=/\B([A-Z])/g,k=b((function(t){return t.replace(C,"-$1").toLowerCase()}));var S=Function.prototype.bind?function(t,e){return

vue3生产环境部分代码

/**
 * Minified by jsDelivr using Terser v5.15.1.
 * Original file: /npm/vue@3.2.47/dist/vue.global.js
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
var Vue=function(e){"use strict";function t(e,t){const n=Object.create(null),o=e.split(",");for(let e=0;e<o.length;e++)n[o[e]]=!0;return t?e=>!!n[e.toLowerCase()]:e=>!!n[e]}const n={1:"TEXT",2:"CLASS",4:"STYLE",8:"PROPS",16:"FULL_PROPS",32:"HYDRATE_EVENTS",64:"STABLE_FRAGMENT",128:"KEYED_FRAGMENT",256:"UNKEYED_FRAGMENT",512:"NEED_PATCH",1024:"DYNAMIC_SLOTS",2048:"DEV_ROOT_FRAGMENT",[-1]:"HOISTED",[-2]:"BAIL"},o={1:"STABLE",2:"DYNAMIC",3:"FORWARDED"},r=t("Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt");function s(e){if(O(e)){const t={};for(let n=0;n<e.length;n++){const o=e[n],r=M(o)?a(o):s(o);if(r)for(const e in r)t[e]=r[e]}return t}return M(e)||j(e)?e:void 0}const i=/;(?![^(]*\))/g,c=/:([^]+)/,l=/\/\*.*?\*\//gs;function a(e){const t={};return e.replace(l,"").split(i).forEach((e=>{if(e){const n=e.split(c);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function u(e){let t="";if(M(e))t=e;else if(O(e))for(let n=0;n<e.length;n++){const o=u(e[n]);o&&(t+=o+" ")}else if(j(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const ……

开头版本号都写得很清楚，可惜当时就是看不到啊

解孔明

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
版本问题导致导入vue报错：Uncaught TypeError: Vue is not a constructor

默认地址展示的是vue3，所以在环境代码地址https://cdn.jsdelivr.net/npm/vue后面加上‘@2’，重新复制页面内容得到vue2代码，替换js/vue-prod.js，问题消失
复制链接

扫一扫