在ES6中导入软件包:“无法解析模块说明符" vue". [英] importing a package in ES6: "Failed to resolve module specifier "vue""
问题描述
尝试遵循一些Vue教程，目前我无法将Vue导入到 .js 文件中，然后将该文件导入到我的 index.html 中.这就是我在 index.html :
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>
如果我在 main.js 文件中这样做:
If I do this in my main.js file:
import Vue from 'vue';
在浏览器控制台中出现以下错误:
I get the following error in the browser console:
未捕获的TypeError:无法解析模块说明符"vue".相对引用必须以"/"、./"或"../"开头.
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
如果我的导入行是:
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(未找到)
http://localhost:63342/vue-official-tutorial/node_modules/vue net::ERR_ABORTED 404 (Not Found)
我在做什么错了?
推荐答案
UPDATE(2020-05-10)
如果您正在使用 ES6 ，那么您不应手动将 main.js 插入 index.html -这将由 Webpack 处理.实际上，Vue最简单的教程是这样的:
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:
- npm install -g vue-cli
- vue初始化webpack my_project
- npm run dev(并开始开发-结果可在 http://localhost:8080 上获得)
- npm run build(结果位于项目的
./dist文件夹中
- 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
此外，您应该这样导入Vue
Also, you should import Vue like this
从"vue"导入Vue；
import Vue from 'vue';
不是这样
从'../../node_modules/vue'导入Vue；
import Vue from '../../node_modules/vue';
编辑
好的，如果您坚持走初学者的道路，而不使用Webpack和单文件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>
您的/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: {}
});
这篇关于在ES6中导入软件包:“无法解析模块说明符" vue".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
