未捕获的ReferenceError:在Index.html中设置vue设置时未定义Vue

Question

未捕获的ReferenceError:在Index.html中设置vue设置时未定义Vue

我最近在学习 vue

我有这个文件 main.js

import Vue from 'vue/dist/vue.js'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

var App = new Vue({
    el: '#app',
    data: {
          message : "It's working"
    }
})

Run Code Online (Sandbox Code Playgroud)

这是我的HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body>
    <h3 id="app">{{ message }}</h3>
    <script src="dist/build.js"></script>

    <script>

    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

它正在发挥作用.但是,现在我正在尝试用我的脚本做点什么.我改变了main.js(我正在使用webpack)

import Vue from 'vue/dist/vue.js'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

Run Code Online (Sandbox Code Playgroud)

然后我的index.html到此

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body>
    <h3 id="app">{{ message }}</h3>
    <script src="dist/build.js"></script>

    <script>
var App = new Vue({
    el: '#app',
    data: {
        message:"It's not working"
    }
})
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我得到这个错误

未捕获的ReferenceError:未定义Vue

我怎样才能解决这个问题？

Answer 1

iro*_*eek 35

如果您想Vue直接在中创建一个新实例,则index.html应该在您的库中包含库index.html:

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

Run Code Online (Sandbox Code Playgroud)

或者你需要像这样分配Vue到window对象main.js:

main.js:

 import Vue from 'vue';
 window.Vue = Vue;

Run Code Online (Sandbox Code Playgroud)

然后在index.html你有权访问,Vue()因为它是window对象的全局属性.

归档时间：	8 年，3 月前
查看次数：	32701 次
最近记录：	8 年，3 月前