无法从导入中引入 Vue，但如果我将其引入 html 文件中，则可以访问它

Question

So I'm switching from React over to Vue and have just a simple hello world sort of project up that works only when I bring in Vue in script tag in my HTML file. However I can't import the node module like:

import './node_modules/vue/dist/vue.js

or

import Vue from 'vue'

Like I said if I have a script in my HTML file such as

<script src='./node_modules/vue/dist/vue.js'></script>
<script src="app.js"></script>

Then I can have in my app.js :

 new Vue({
    el: '#app',
    data: {
        message: 'Hello vue'
    }
});

And have it work just fine.

Why can I only bring Vue in from a script tag?

Notes that might or might not matter : I used NPM and installed Vue through NPM it is listed in my dependencies. I'm not using webpack or any sort of transpiler like babel.

Answer 1

<script src="app.js" type="module"></script>

You have to declare the script as of type "module" to tell the browser it's an ES6 module file and then you can use the import keyword assuming your browser supports it. Browser support: https://caniuse.com/#feat=es6-module