将 vue 组件导入我的页面未捕获的异常答案

【问题标题】：Importing vue component into my page Uncaught Exception将 vue 组件导入我的页面未捕获的异常
【发布时间】：2022-01-16 14:23:27
【问题描述】：

我有一个加载以下 JS 文件的页面

Vue.js
app.js

app.js 文件是使用 webpack 编译的，其中包含来自 @chenfengyuan/vue-countdown 的 NPM 组件。

我正在尝试在我的页面上使用以下代码在我的页面上显示一个 vue.js 倒计时组件：

<div class="container" id="app">
  <vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
    Time Remaining：@{{ days }} days, @{{ hours }} hours, @{{ minutes }} minutes, @{{ seconds }} seconds.
  </vue-countdown>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
  import VueCountdown from '@chenfengyuan/vue-countdown';

  // Vue application
  const app = new Vue({
    el: '#app',
    data: {
      messages: [],
    },
  });
  app.component(VueCountdown.name, VueCountdown);
</script>

当我运行这个时，我得到一个 JS 错误说：

未捕获的语法错误：无法在模块外使用 import 语句

谁能解释我做错了什么以及如何正确导入它？

【问题讨论】：

这可能会有所帮助：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…
现在我收到一条错误消息，指出Uncaught TypeError: Failed to resolve module specifier "@chenfengyuan/vue-countdown". Relative references must start with either "/", "./", or "../".。我不确定正确的路径是什么。
如果您不使用捆绑器，则需要使用该库的 dist 版本。 github.com/fengyuanchen/vue-countdown#getting-started。它也可以通过 CDN 获得：jsdelivr.com/package/npm/@chenfengyuan/vue-countdown
@J.Titus，我已经尝试使用 CDN 引用，但仍然出现导入语句错误。我不太明白我应该如何解决它。
我认为你不能在那里使用这个@符号。通常当你这样做时，你需要一些将@符号映射到根目录的配置文件。但是这里你在一个普通的 html 文件中使用它，所以我认为你必须为你的脚本导入使用正确的路径。

标签： javascript vue.js

【解决方案1】：

不需要导入，当我们引用脚本时，它会将其添加到页面范围内。我创建了一个工作代码笔here。

我相信您遇到的问题不包括components，所以您非常接近！

<div class="container" id="app">
  <vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
    Time Remaining：@{{ days }} days, @{{ hours }} hours, @{{ minutes }} minutes, @{{ seconds }} seconds.
  </vue-countdown>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@chenfengyuan/vue-countdown@1.1.5/dist/vue-countdown.min.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    components: {
      VueCountdown,
    },
    data: {
      messages: [],
    },
  });
  // This line is not needed
  // app.component(VueCountdown.name, VueCountdown);
</script>

【讨论】：