Question

尝试遵循一些Vue教程，目前我无法将Vue导入到.js文件中，然后将该文件导入到我的index.html中。这就是我在index.html中导入脚本的方式：

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

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

import Vue from 'vue';

在浏览器控制台中出现以下错误：

未捕获的TypeError：无法解析模块说明符“ vue”。相对引用必须以“ /”、“./”或“ ../”开头。

如果我的导入行是：

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

然后我得到了另一个错误：

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

我在做什么错了？

Answer 1

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

使用您的依赖项的ESM版本（具有import而不是require的依赖项）。例如，可以通过以下网址获得Vue ESM版本：https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js
通过实验性importmap功能使浏览器正常工作。导入地图是一项新的Web建议，主流浏览器尚不支持。 https://wicg.github.io/import-maps/#import-map在Chrome中位于chrome://flags#enable-experimental-productivity-features下（最新的Chrome版本将其移至chrome://flags#enable-experimental-web-platform-features下）
在HTML文件中创建一个importmap。目前，它仅在Chrome中与内嵌<script>标记一起使用。例如：

<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
  "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.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.0.0-beta.14/vue.esm-browser.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
  "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.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

如果您正在使用 ES6 ，那么您不应手动将$myObj->clients[] = ['id'=>$id, 'name'=>$name]插入main.js-这将由处理Webpack 。实际上，Vue最简单的教程是这样的：

npm install -g vue-cli
vue初始化webpack my_project
npm run dev（并开始开发-结果在http://localhost:8080上可用）
npm run build（结果可在项目的index.html文件夹中找到

此外，您应该这样导入Vue

从“ vue”导入Vue；

不是这样

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

编辑

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

./dist

您的<!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>  <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>  <script type="text/javascript" src="/app/login.js"></script>  <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

Answer 3

仅在使用CLI和Webpack等时，才可以使用“ import vue ...”。

如果您是直接在网页上使用Vue，则可以按照https://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 个答案:

编辑