VUE：模块解析失败：意外令牌（1:0）答案

【问题标题】：VUE: Module parse failed: Unexpected token (1:0)VUE：模块解析失败：意外令牌（1:0）
【发布时间】：2020-11-02 09:06:32
【问题描述】：

我正在关注 YouTube 上的 Net Ninja Vue 教程。在教程 19 中，我正在浏览我希望使用 v-for 和 v-bind: 键显示 ul 列表的嵌套组件。我不断收到以下错误，它不会编译。我是Vue的新手，那里的大师可以在这里帮助我。目前我的 vue 版本是@vue/cli 4.4.6，npm 是 6.13.4

代码

<template>
    <ul>
        <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      ninjas: ['Ryu','Ken','Yoshi']
    }
  }
}
</script>

<style>

</style>

错误

ERROR in ./src/Ninjas.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <ul>
|         <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
 @ ./src/main.js 3:0-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

【问题讨论】：

你的原始代码中有结束标签</li>吗？
最初没有，但添加了它仍然是相同的错误消息

标签： vue.js vuejs2 vue-component

【解决方案1】：

您还需要检查您是否在 webpack.mix.js 文件中添加了以下代码：

 mix.js('resources/js/app.js', 'public/js').vue();

我们添加了 .vue() 函数，因为现在随着最新的更新，webpack 配置发生了变化，所以我们需要根据它进行更改。

希望对大家有所帮助

【讨论】：

【解决方案2】：

首先Ninjas.Vue中的代码没有问题

问题在于文件名Ninjas.Vue 应该重命名为Ninjas.vue

因为vue 中的组件以扩展名.vue 结尾，小写

【讨论】：

【解决方案3】：

在 Laravel 8 中，如果你想编译 Vue，在运行之前确保你已经使用 npm 安装了“vue-template-compiler”和“vue-loader”。

如果没有安装，试试这个：

npm install vue-template-compiler

npm install vue-loader

现在你可以运行npm run watch。

【讨论】：

【解决方案4】：

将.vue() 添加到我为我工作的网络包中

mix.js('resources/js/landing/quote.js', 'public/js/landing').vue();

【讨论】：