在 ES6 中导入包：“无法解析模块说明符“vue””

Question

Trying to follow some Vue tutorials and I can't currently import Vue in a .js file and then import this file in my index.html .尝试遵循一些 Vue 教程，我目前无法在.js文件中导入 Vue，然后在我的index.html中导入该文件。 This is how I'm importing the script in my index.html :这就是我在index.html中导入脚本的方式：

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

If I do this in my main.js file:如果我在main.js文件中执行此操作：

import Vue from 'vue';

I get the following error in the browser console:我在浏览器控制台中收到以下错误：

Uncaught TypeError: Failed to resolve module specifier "vue".未捕获的类型错误：无法解析模块说明符“vue”。 Relative references must start with either "/", "./", or "../".相对引用必须以“/”、“./”或“../”开头。

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/vue net::ERR_ABORTED 404 (Not Found) http://localhost:63342/vue-official-tutorial/node_modules/vue net::ERR_ABORTED 404（未找到）

What am I doing wrong?我究竟做错了什么？

Answer 1

The way you can use ES modules in your Browser directly (as of June 2020) is thus:因此，您可以直接在浏览器中使用 ES 模块（截至 2020 年 6 月）的方式是：

Use the ESM version of your dependencies (the one that has import instead of require ).使用依赖项的 ESM 版本（具有import而不是require的版本）。 For example, Vue ESM version is available at: https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js例如，Vue ESM 版本位于： https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js ://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js
Make your browser work with the experimental importmap feature.让您的浏览器使用实验性的importmap功能。 Import maps are a new web recommendation, not yet supported in mainstream browsers.导入地图是一种新的网络推荐，主流浏览器尚不支持。 https://wicg.github.io/import-maps/#import-map In Chrome this is under chrome://flags#enable-experimental-productivity-features (latest Chrome versions moved this under chrome://flags#enable-experimental-web-platform-features ) https://wicg.github.io/import-maps/#import-map在 Chrome 中，它位于chrome://flags#enable-experimental-productivity-features下（最新的 Chrome 版本将它移到chrome://flags#enable-experimental-web-platform-features下chrome://flags#enable-experimental-web-platform-features )
Create an importmap in your HTML file.在您的 HTML 文件中创建一个importmap 。 It only works with inline <script> tags at the moment in Chrome.它目前仅适用于 Chrome 中的内联<script>标签。 For example:例如：

<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.esm-browser.min.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.16/vue-router.esm-browser.min.js"
} }
</script>

Load your own code as an ESM module.将您自己的代码加载为 ESM 模块。

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

In your own scripts, and the scripts that you import - you can now successfully import from named modules.在您自己的脚本和您导入的脚本中 - 您现在可以成功地从命名模块导入。

Full example:完整示例：

<html>
<body>
<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.esm-browser.min.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.16/vue-router.esm-browser.min.js"
} }
</script>
<script type="module">
import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'

const router = createRouter()

export default createApp({
  router
})
</script>
</body>
</html>

Answer 2

UPDATE (2020-05-10)更新 (2020-05-10)

Using ES6 modules without Webpack 在没有 Webpack 的情况下使用 ES6 模块

If you are working with ES6 then you should NOT manually inserting your main.js into index.html - this will be handled by Webpack .如果您使用的是ES6 ，那么您不应该手动将main.js插入index.html - 这将由Webpack处理。 Actually, the simplest tutorial for Vue goes like this:实际上，最简单的 Vue 教程是这样的：

npm install -g vue-cli npm install -g vue-cli
vue init webpack my_project vue 初始化 webpack my_project
npm run dev (and start developing - result is available on http://localhost:8080 ) npm run dev（并开始开发 - 结果可在http://localhost:8080上获得）
npm run build (result is available inside the ./dist folder of your project 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/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/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.js will 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.js component 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: {}
});

Answer 3

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://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include and include a line like this in your HTML file:如果您直接在网页中使用 Vue，您可以按照https://v2.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 Vue will be defined and you don't need to import it again.在你导入你自己的脚本之前做这件事，然后Vue会被定义，你不需要再次导入它。 Import your script without the "module" attribute.导入没有“模块”属性的脚本。 In the script, you can run:在脚本中，您可以运行：

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>

在 ES6 中导入包：“无法解析模块说明符“vue””

问题描述

3 个解决方案

解决方案1
22 2020-06-09 12:07:29

解决方案2
10 已采纳 2018-10-02 17:09:22

UPDATE (2020-05-10)更新 (2020-05-10)

EDIT编辑

解决方案3
4 2019-09-30 23:19:06

在 ES6 中导入包：“无法解析模块说明符“vue””

问题描述

3 个解决方案

解决方案1 22 2020-06-09 12:07:29

解决方案2 10 已采纳 2018-10-02 17:09:22

UPDATE (2020-05-10)更新 (2020-05-10)

EDIT编辑

解决方案3 4 2019-09-30 23:19:06

解决方案1
22 2020-06-09 12:07:29

解决方案2
10 已采纳 2018-10-02 17:09:22

解决方案3
4 2019-09-30 23:19:06