javascript 在 ES6 中导入包：“无法解析模块说明符“vue””
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52612446/
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
importing a package in ES6: "Failed to resolve module specifier "vue""
提问by zerohedge
Trying to follow some Vue tutorials and I can't currently import Vue in a .jsfile and then import this file in my index.html. This is how I'm importing the script in my index.html:
尝试遵循一些 Vue 教程，但我目前无法在.js文件中导入 Vue ，然后在我的index.html. 这就是我在我的脚本中导入脚本的方式index.html：
<script src="./js/main.js" type="module"></script>
If I do this in my main.jsfile:
如果我在我的main.js文件中这样做：
import Vue from 'vue';
I get the following error in the browser console:
我在浏览器控制台中收到以下错误：
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
未捕获的类型错误：无法解析模块说明符“vue”。相对引用必须以“/”、“./”或“../”开头。
If my import line to:
如果我的导入行：
import Vue from '../../node_modules/vue';
Then I get a different error:
然后我得到一个不同的错误：
http://localhost:63342/vue-official-tutorial/node_modules/vuenet::ERR_ABORTED 404 (Not Found)
http://localhost:63342/vue-official-tutorial/node_modules/vuenet::ERR_ABORTED 404（未找到）
What am I doing wrong?
我究竟做错了什么？
采纳答案by IVO GELOV
UPDATE (2020-05-10)
更新 (2020-05-10)
Using ES6 modules without Webpack
If you are working with ES6then you should NOTmanually inserting your main.jsinto index.html- this will be handled by Webpack. Actually, the simplest tutorial for Vue goes like this:
如果你正在使用ES6，那么你不应该手动插入你的main.js成index.html-这将被处理的WebPack。实际上，最简单的 Vue 教程是这样的：
- npm install -g vue-cli
- vue init webpack my_project
- npm run dev (and start developing - result is available on http://localhost:8080)
- npm run build (result is available inside the
./distfolder of your project
- npm install -g vue-cli
- vue init webpack my_project
- npm run dev （并开始开发 - 结果在http://localhost:8080上可用）
- npm run build（结果在
./dist你的项目文件夹中可用
Also, you should import Vue like this
另外，你应该像这样导入Vue
import Vue from 'vue';
从'vue'导入Vue；
and not like this
而不是这样
import Vue from '../../node_modules/vue';
从'../../node_modules/vue'导入Vue；
EDIT
编辑
Okay, if you insist on going through the beginners' path and not using Webpack and single-file Vue components - then you should start like this:
好吧，如果你坚持走初学者的道路，而不是使用 Webpack 和单文件 Vue 组件——那么你应该这样开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>My beginners project</title>
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<!-- templates for your components -->
<template id="login">
<div>test</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<!-- code for your components -->
<script type="text/javascript" src="/app/login.js"></script>
<!-- Vue Root component should be last -->
<script type="text/javascript" src="/app/app.js"></script>
</body>
</html>
And your /app/app.jswill look like this:
你的/app/app.js遗嘱是这样的：
var badRoute = Vue.component('bad-route', {
template: '<div id="bad_route"><h1>Page Not Found</h1><p>Sorry, but the page you were trying to view does not exist.</p></div>'
});
var vue_router = new VueRouter({
base: '/app'
, mode: 'hash'
, routes: [{
path: '/'
, redirect: '/login'
}, {
path: '/login'
, component: loginForm
, name: 'LOGIN'
}, {
path: '*', // should be last, otherwise matches everything
component: badRoute
, name: 'NOT FOUND'
}]
});
// Main application
var vue_app = new Vue({
router: vue_router
, })
.$mount('#app');
And your /app/login.jscomponent will look like this:
您的/app/login.js组件将如下所示：
var loginForm = Vue.component('login-form', {
template: '#login', // should match the ID of template tag
data: function() {
var a = {
username: ''
, password: ''
, };
return a;
}
, methods: {}
});
回答by Glen Little
You can only use "import vue..." if you are using the CLI and webpack, etc.
如果您使用的是 CLI 和 webpack 等，则只能使用“import vue...”。
If you are using Vue directly in a web page, you can follow the instructions at https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Includeand include a line like this in your HTML file:
如果您直接在网页中使用 Vue，则可以按照https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include 中的说明进行操作，并在您的HTML文件：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Do this before you import your own script, and then Vuewill be defined and you don't need to import it again. Import your script without the "module" attribute. In the script, you can run:
在导入自己的脚本之前执行此操作，然后Vue将被定义，您不需要再次导入它。导入没有“模块”属性的脚本。在脚本中，您可以运行：
var x = new Vue({
el: '#myApp',
... all the other stuff ...
})
This assumes that somewhere on your HTML page you have:
这假设您在 HTML 页面上的某个地方有：
<div id=myApp></div>
