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

标签 javascript html vue.js import module

所以我从 React 切换到 Vue,并且只有一个简单的 hello world 类型的项目,只有当我在我的 HTML 文件中的 script 标签中引入 Vue 时它才有效。但是我无法像这样导入节点模块:

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

import Vue from 'vue'

就像我说的,如果我的 HTML 文件中有一个脚本,例如

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

然后我可以在我的 app.js 中:

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

让它正常工作。

为什么我只能从脚本标签中引入 Vue?

可能重要也可能无关紧要的注意事项: 我使用了 NPM 并通过 NPM 安装了 Vue,它列在我的依赖项中。 我没有使用 webpack 或任何类型的转译器,如 babel。

最佳答案

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

您必须将脚本声明为“模块”类型,以告诉浏览器它是一个 ES6 模块文件,然后您可以使用 import 关键字(假设您的浏览器支持它)。浏览器支持:https://caniuse.com/#feat=es6-module

关于javascript - 无法从导入中引入 Vue,但如果我将它引入 html 文件中,则可以访问它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51373017/

相关文章:

webpack - 为什么 Vue router/Webpack dev server 现在显示 Cannot GET/path on page refresh?

laravel - 等同于 Vue.js 中的 @foreach($variable as $key => $var)

javascript - 扎 PIL 还是自己动手?

javascript - 在 ReactJs 中将 props 传递给 modal

javascript - 为什么 onClick 不能在 React 中的自定义组件上工作?

javascript - new到底在做什么?

Javascript 和 JQuery - 将输入附加到具有相同类的多个 div

javascript - 隐藏子级的父级 div

javascript - 鼠标悬停和单击事件冲突

javascript - 使用 jquery 选择和取消选择复选框