在 ES6 中導入包：“無法解析模塊說明符“vue””

Question

嘗試遵循一些 Vue 教程，我目前無法在.js文件中導入 Vue，然后在我的index.html中導入該文件。 這就是我在index.html中導入腳本的方式：

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

如果我在main.js文件中執行此操作：

import Vue from 'vue';

我在瀏覽器控制台中收到以下錯誤：

未捕獲的類型錯誤：無法解析模塊說明符“vue”。 相對引用必須以“/”、“./”或“../”開頭。

如果我的導入行到：

import Vue from '../../node_modules/vue';

然后我得到一個不同的錯誤：

http://localhost:63342/vue-official-tutorial/node_modules/vue net::ERR_ABORTED 404（未找到）

我究竟做錯了什么？

Answer 1

因此，您可以直接在瀏覽器中使用 ES 模塊（截至 2020 年 6 月）的方式是：

使用依賴項的 ESM 版本（具有import而不是require的版本）。 例如，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
讓您的瀏覽器使用實驗性的importmap功能。 導入地圖是一種新的網絡推薦，主流瀏覽器尚不支持。 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 )
在您的 HTML 文件中創建一個importmap 。 它目前僅適用於 Chrome 中的內聯<script>標簽。 例如：

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

將您自己的代碼加載為 ESM 模塊。

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

在您自己的腳本和您導入的腳本中 - 您現在可以成功地從命名模塊導入。

完整示例：

<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

更新 (2020-05-10)

在沒有 Webpack 的情況下使用 ES6 模塊

如果您使用的是ES6 ，那么您不應該手動將main.js插入index.html - 這將由Webpack處理。 實際上，最簡單的 Vue 教程是這樣的：

npm install -g vue-cli
vue 初始化 webpack my_project
npm run dev（並開始開發 - 結果可在http://localhost:8080上獲得）
npm run build （結果在項目的./dist文件夾中可用

另外，你應該像這樣導入 Vue

從'vue'導入Vue；

而不是這樣

從 '../../node_modules/vue' 導入 Vue；

編輯

好的，如果你堅持走初學者的道路，而不是使用 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>

您的/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');

您的/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

如果您使用 CLI 和 webpack 等，則只能使用“import vue ...”。

如果您直接在網頁中使用 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>

在你導入你自己的腳本之前做這件事，然后Vue會被定義，你不需要再次導入它。 導入沒有“模塊”屬性的腳本。 在腳本中，您可以運行：

var x = new Vue({ 
  el: '#myApp',
  ... all the other stuff ...
})

這假設您在 HTML 頁面上的某個地方擁有：

<div id=myApp></div>

在 ES6 中導入包：“無法解析模塊說明符“vue””

問題描述

3 個解決方案

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

解決方案2
10 已采納 2018-10-02 17:09:22

更新 (2020-05-10)

編輯

解決方案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

更新 (2020-05-10)

編輯

解決方案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