问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

尝试遵循一些 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（未找到）

我究竟做错了什么？

原文由 zerohedge 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.js
阅读 1.8k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

更新 (2020-05-10)

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

如果您正在使用 ES6 ，则 不应 手动将 main.js 插入 index.html - 这将由 Webpack 处理。实际上，最简单的 Vue 教程是这样的：

  1. npm install -g vue-cli
  2. vue 初始化 webpack my_project
  3. npm run dev（并开始开发 - 结果可在 http://localhost:8080 上获得）
  4. 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: {}
});

原文由 IVO GELOV 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

  1. 使用依赖项的 ESM 版本（具有 import 而不是 require 的版本）。例如，Vue ESM 版本位于： https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js

  2. 让您的浏览器使用实验性的 importmap 功能。导入地图是一种新的网络推荐，主流浏览器尚不支持。 https://wig.github.io/import-maps/#import-map 在 Chrome 中，这是在 chrome://flags#enable-experimental-productivity-features 下（最新的 Chrome 版本将它移到了 chrome://flags#enable-experimental-web-platform-features 下）

  3. 在您的 HTML 文件中创建一个 importmap 。它目前仅适用于 Chrome 中的内联 <script> 标签。例如：

 <script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js"
} }
</script>
  1. 将您自己的代码加载为 ESM 模块。
 <script type="module" src="./main.js"></script>
  1. 在您自己的脚本和您导入的脚本中 - 您现在可以成功地从命名模块导入。

完整示例：

 <html>
<body class="app">

<script type="importmap">
{ "imports": {
  "vue":               "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
  "vue-router":        "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js",
  "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.4.5/lib/esm/index.js"
} }
</script>

<script type="module">
import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'

const app = createApp({ template: 'Hello world.' })
const router = createRouter({
  routes: [{ path: '/:pathMatch(.*)*', component: app }],
  history: createWebHistory()
})
app.use(router)

document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
</script>

</body>
</html>

原文由 Evgeny 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题