时间戳

首页 > 解决方案 > 未捕获的语法错误：在 JS 文件中导入 JavaScript 时出现意外标识符

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

问题描述

我目前正在尝试让 Vuejs 在现有项目中运行，但是在将组件导入 app.js 时，我经常在标题中收到提到的错误。与我发现的 Stackoverflow 上的所有其他帖子不同，我不尝试通过脚本标签将 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

** 编辑 ** 对不起，我显然没有发布整个代码。

示例组件.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

标签： javascriptvue.jsimportsyntax-error

解决方案

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

您可以根据此答案使用 CDN/ 路由在没有 webpack 的情况下进行编译。因此，如果@sovalina 的回答没有帮助（这似乎很明显），那么您的 HTML/模板中可能存在问题？你能发布那个或小提琴吗？

推荐阅读