Javascript Vue 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36210062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue is not defined
提问by Vladimir Hraban
I am trying to build a demo app with Vue.js. What I am getting is an odd error that Vue is not defined.
我正在尝试使用 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>
What did I miss here? This is not a CDN issue as I also downloaded the library from the official website, used it and got the same result
我在这里错过了什么？这不是 CDN 问题，因为我也从官方网站下载了该库，使用它并得到了相同的结果
index.html:15 Uncaught ReferenceError: Vue is not defined
index.html:15 Uncaught ReferenceError: Vue 未定义
回答by Roko C. Buljan
- You missed the order, first goes:
- 您错过了订单，首先是：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
and then:
进而：
<script>
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
});
</script>
- And
type="JavaScript"should betype="text/javascript"(or rather nothing at all)
- 并且
type="JavaScript"应该是type="text/javascript"（或者根本没有）
回答by Sparkmorry
try to fix type="JavaScript"to type="text/javascript"in you vue.js srcipt tag, or just remove it.
Modern browsers will take script tag as javascript as default.
尝试修复type="JavaScript"到type="text/javascript"你vue.js srcipt标签，或只是将其删除。现代浏览器将脚本标签作为 javascript 作为默认值。
回答by T.Todua
Sometimes the problem may be if you importthat like this:
有时问题可能是如果你import喜欢这样：
const Vue = window.vue;
this may overwrite the original Vuereference.
这可能会覆盖原始Vue参考。
回答by Adi_Pithwa
I got this error but as undefined due to the way I included js files
我收到此错误，但由于我包含 js 文件的方式未定义
Initailly i had
最初我有
<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>
in the end of my .cshtml page GOT Error Vue not Definedbut later I changed it to
在我的 .cshtml 页面末尾 GOT Error Vue not Defined但后来我将其更改为
<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>
and magically it worked. So i assume that vue js needs to be loaded on top of the .vue
它神奇地起作用了。所以我假设 vue js 需要加载在 .vue 之上
回答by Teocci
I found two main problems with that implementation. First, when you import the vue.jsscript you use type="JavaScript"as content-typewhich is wrong. You should remove this typeparameter because by default scripttags have text/javascriptas default content-type. Or, just replace the typeparameter with the correct content-typewhich is type="text/javascript".
我发现该实现有两个主要问题。首先，当您导入vue.js您使用的脚本时type="JavaScript"，content-type这是错误的。您应该删除此type参数，因为默认情况下script标签具有text/javascript默认的content-type. 或者，只需将type参数替换为正确content-type的 type="text/javascript".
The second problem is that your script is embedded in the same HTML file means that it may be triggered first and probably the vue.jsfile was not loaded yet. You can fix this using a jQuerysnippet $(function(){ /* ... */ });or adding a javascriptfunction as shown in this example:
第二个问题是您的脚本嵌入在同一个 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>回答by Vince Banzon
I needed to add the script below to index.html inside the HEAD tag.
我需要将下面的脚本添加到 HEAD 标签内的 index.html 中。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
But in your case, since you don't have index.html, just add it to your HEAD tag instead.
但在您的情况下，由于您没有 index.html，只需将其添加到您的 HEAD 标记中即可。
So it's like:
所以它就像：
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>
