Question

我正在尝试使用Vue.js构建一个演示应用程序。我得到的是一个奇怪的错误，Vue没有被定义。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue JS Intro</title>
</head>
<body>
    <div id="demo">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <script type="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>
</html>

我在这里想念什么？这不是CDN问题，因为我也从官方网站下载了这个库，使用它并得到了相同的结果

index.html：15未捕获的ReferenceError：未定义Vue

Answer 1

<强> jsBin demo

你错过了订单，先是

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

而不是

<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>

和type="JavaScript"应为type="text/javascript"（或者根本没有）

Answer 2

尝试在您的vue.js srcipt标记中修复type="JavaScript"到type="text/javascript"，或者只删除它。现代浏览器默认将脚本标记用作javascript。

Answer 3

我需要将以下脚本添加到HEAD标记内的index.html。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

但在您的情况下，由于您没有index.html，只需将其添加到您的HEAD代码中。

所以它就像：

<!doctype html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>

Answer 4

有时问题可能是import这样：

const Vue = window.vue;

这可能会覆盖原始Vue引用。

Answer 5

我收到此错误，但由于我包含js文件的方式而未定义

我有Initailly

<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>
<script src="~/lib/vue/vue_v2.5.16.js"></script>

在我的.cshtml页末尾 GOT错误未定义值 但后来我将其更改为

<script src="~/lib/vue/vue_v2.5.16.js"></script> 
<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>

神奇地成功了。所以我认为vue js需要加载到.vue

的顶部

Answer 6

我发现该实现存在两个主要问题。首先，在导入vue.js脚本时，您将type="JavaScript"用作content-type是错误的。您应删除此type参数，因为默认情况下script标记的text/javascript作为默认content-type。或者，只需将type参数替换为正确的content-type type="text/javascript"。

第二个问题是您的脚本嵌入在相同的HTML文件中，这意味着可能会首先触发该脚本，并且可能尚未加载vue.js文件。您可以使用 jQuery 代码段$(function(){ /* ... */ });或添加 javascript 函数来解决此问题，如以下示例所示：

// Verifies if the document is ready
function ready(f) {
  /in/.test(document.readyState) ? setTimeout('ready(' + f + ')', 9) : f();
}

ready(function() {
  var demo = new Vue({
    el: '#demo',
    data: {
      message: 'Hello Vue.js!'
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>

Answer 7

我遇到了同样的问题，出于一个奇怪的原因，包含 js 的 Vue 在 defer 定义中有一个 script：

<script src="js/app.js" defer></script>

这导致 script 加载比其他 js 文件异步。

删除 defer 标签后，问题解决了。

Answer 8

只需将 text/javascript 放在用于 cdn 的脚本标签中

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js" type="text/javascript"></script>

Vue未定义

8 个答案: