未捕获的语法错误：在 JS 文件中导入 JavaScript 时出现意外标识符

Posted 2023-02-23

【中文标题】未捕获的语法错误：在 JS 文件中导入 JavaScript 时出现意外标识符

【英文标题】：Uncaught Syntaxerror: Unexptected Identifier at JavaScript import inside a JS File

【发布时间】：2018-10-10 14:22:54

【问题描述】：

我目前正在尝试让 Vuejs 在现有项目中运行，但在将组件导入 app.js 时，我不断收到标题中提到的错误。与我在 *** 上找到的所有其他帖子不同，我并没有尝试通过脚本标签将 javascript 文件导入 html 文件。

我的 app.js 代码如下所示：

import Vue from 'vue';
import exampleComponent from './components/exampleComponent.vue';

Vue.component('exampleComponent', exampleComponent);

const app = new Vue(
    el: '#vueApp'
);

此时我真的很绝望，因为我已经在这个错误上失败了好几个小时了。

我能想到的关于该错误的唯一可能性是我未能初始化一些重要的东西，因为我试图将 Vue 添加到现有应用程序中。我只通过 npm 安装了 Vue，并且由于我绝望的心情，我在 index.php 中嵌入了一个用于 vuejs（vue 网站的特色）的 cdn 脚本。也许缺少开发服务器，或者我什至必须安装 webpack 等。

您知道解决方案或遇到过类似的事情吗？

提前致谢，J0nny

** 编辑 ** 很抱歉，我显然没有发布整个代码。

ExampleComponent.vue：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default 
        name: 'exampleComponent',
        mounted() 
            console.log('Component mounted.')
        
    
</script>

索引.php：

只包含#vueApp和cdn

【参考方案1】：

这不是一个真正的答案 - 所以向版主/社区道歉 - 但我没有足够的声誉来发表评论。

您可以compile without webpack using the CDN/ route according to this answer。因此，如果@sovalina 的回答没有帮助（这似乎很明显），那么您的 HTML/模板中可能存在问题？你能发布那个或小提琴吗？

【讨论】：

好吧@bigsee，我做到了。希望它能对您和未来的评论者有所帮助:)

谢谢@J0nny - 你能不能也显示你更新的 app.js 和你的 index.php？ :)