Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

vue.js - Uncaught ReferenceError: Vue is not defined when put vue setting in Index.html

i recently learning about vue

I have this file 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"
    }
})

and here is my 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>

It's working. But, now i'm trying to do something with my script. I change main.js (I'm using webpack)

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

then my index.html to this

<!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>

and i get this error

Uncaught ReferenceError: Vue is not defined

How can i fix this ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

If you want to make a new instance of Vue directly in index.html you should either include the library in your index.html:

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

Or you need to assign the Vue to window object in main.js like so:

main.js:

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

then in index.html you have access to Vue() because it is a global property of window object.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...