无法在 Vue 框架的 main.js 中使用导入模块答案

【问题标题】：Can't use import modules in main.js on Vue Framework无法在 Vue 框架的 main.js 中使用导入模块
【发布时间】：2019-03-29 09:16:31
【问题描述】：

无法在 Vue App 中安装包

我想为我的登录表单 Vue 使用包 vue-tel-input https://www.npmjs.com/package/vue-tel-input 但是当我导入并安装全局组件时出现此错误：

'Uncaught SyntaxError: Unexpected identifier".

这是导入代码

import Vue from 'vue';
import VueTelInput from 'vue-tel-input';

Vue.use(VueTelInput);

Vue.component('js-login', {
    template: `
    <div>
        <div class="js-login-wrap">
            <form class="js-login">
            <h2 class="js-login-heading">Login to Loket</h2>
            <label for="name">Name</label>
            <input type="text" id="field_name" class="form-control" placeholder="Name" required autofocus>
            <label for="email">Email</label>
            <input type="email" id="field_email" class="form-control" placeholder="Email" required autofocus>
        </form>
    </div>
</div>`,
})

new Vue({
    el: '#app',
})

我的目录： enter image description here

我该怎么办？

【问题讨论】：

似乎是正确的。如果您删除导入和注册，它可以正常工作吗？
可以把Vue.use后面的代码贴出来吗？
是的，当我删除它时工作正常@Orlandster
你的 babel 转译器设置正确了吗？
当然，代码更新了@niklaz

标签： vue.js login

【解决方案1】：

如他们的文档中所述：

'用于浏览器的 ESM（仅限 2.6+）：用于在现代浏览器中通过 . 直接导入。 reference

所以尝试将type="module" 添加到您的 main.js 中：

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

【讨论】：

我收到此错误“从源“null”访问“file:///E:/loket/assets/vue/main.js”的脚本已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。我在 E 目录中的位置文件
@DavidWinalda，这不是问题范围的一部分，但由于 CORS 策略问题，您无法从本地计算机加载 main.js。有一些解决方法可以绕过浏览器的 CORS，但不要这样做，因为它不安全，也不是生产的好习惯。而是从某个服务器托管您的 main.js。