在 ES6 中导入包:“无法解析模块说明符“vue"" [英] importing a package in ES6: "Failed to resolve module specifier "vue""

查看：289
本文介绍了在 ES6 中导入包:“无法解析模块说明符“vue""的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

尝试遵循一些 Vue 教程，但我目前无法在 .js 文件中导入 Vue，然后在我的 index.html 中导入此文件.这是我在 index.html 中导入脚本的方式:

如果我在我的 main.js 文件中这样做:

从'vue'导入Vue；

我在浏览器控制台中收到以下错误:

<块引用>

未捕获的类型错误:无法解析模块说明符vue".相对引用必须以/"、./"或../"开头.

如果我的导入行:

从'../../node_modules/vue'导入Vue；

然后我得到一个不同的错误:

<块引用>

http://localhost:63342/vue-official-tutorial/node_modules/vuenet::ERR_ABORTED 404(未找到)

我做错了什么?

解决方案

UPDATE (2020-05-10)

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

<小时>

如果您使用 ES6，那么您不应该手动将 main.js 插入 index.html> - 这将由 Webpack 处理.其实最简单的Vue教程是这样的:

  1. npm install -g vue-cli
  2. vue init webpack my_project
  3. npm run dev(并开始开发 - 结果可在 http://localhost:8080 上获得)
  4. npm run build(结果在项目的 ./dist 文件夹中可用

另外，你应该像这样导入Vue

<块引用>

从'vue'导入Vue;

而不是这样

<块引用>

从'../../node_modules/vue'导入Vue；

编辑

好吧，如果你坚持走初学者的道路，而不是使用 Webpack 和单文件 Vue 组件——那么你应该这样开始:

<html lang="zh-cn"><头><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>我的初学者项目</title><link rel="stylesheet" type="text/css" href="/assets/css/styles.css"/><身体><div id="应用程序"><路由器视图></路由器视图>

<!-- 组件模板--><模板id="登录"><div>测试</div><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><!-- 组件代码--><script type="text/javascript" src="/app/login.js"></script><!-- Vue Root 组件应该放在最后 --><script type="text/javascript" src="/app/app.js"></script>

您的 /app/app.js 将如下所示:

var badRoute = Vue.component('bad-route', {模板:'<div id="bad_route"><h1>未找到页面</h1><p>抱歉，您要查看的页面不存在.</p></div>'});var vue_router = new VueRouter({基地:'/应用程序'，模式:'哈希', 路线: [{小路: '/', 重定向: '/登录'}, {路径:'/登录', 组件: loginForm，名称:'登录'}, {path: '*',//应该在最后，否则匹配所有内容组件:badRoute, name: '未找到'}]});//主要应用var vue_app = new Vue({路由器:vue_router, }).$mount('#app');

您的 /app/login.js 组件将如下所示:

var loginForm = Vue.component('login-form', {template: '#login',//应该匹配模板标签的 ID数据:函数(){变量 a = {用户名: ''， 密码: '', };返回一个；}， 方法: {}});

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. This is how I'm importing the script in my index.html:

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

If I do this in my main.js file:

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 "../".

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)

What am I doing wrong?

解决方案

UPDATE (2020-05-10)

Using ES6 modules without Webpack

If you are working with ES6 then you should NOT manually inserting your main.js into index.html - this will be handled by Webpack. Actually, the simplest tutorial for Vue goes like this:

  1. npm install -g vue-cli
  2. vue init webpack my_project
  3. npm run dev (and start developing - result is available on http://localhost:8080)
  4. npm run build (result is available inside the ./dist folder of your project

Also, you should import Vue like this

import Vue from 'vue';

and not like this

import Vue from '../../node_modules/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:

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

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:

var loginForm = Vue.component('login-form', {
    template: '#login', // should match the ID of template tag
    data: function() {
        var a = {
            username: ''
            , password: ''
        , };
        return a;
    }
    , methods: {}
});

这篇关于在 ES6 中导入包:“无法解析模块说明符“vue""的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆