“你可能需要一个合适的加载器来处理这个文件类型”webpack 和 vue答案

【问题标题】："You may need an appropiate loader to handle this file type" webpack and vue“你可能需要一个合适的加载器来处理这个文件类型”webpack 和 vue
【发布时间】：2017-12-15 08:23:00
【问题描述】：

我正在尝试使用以下命令编译 webpack：

node_modules/.bin/webpack

我得到了错误：

Module parse failed: 
/home/vagrant/Code/stream/resources/assets/js/views/Contact.vue 
Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

webpack 在每个扩展名为 .vue 的文件中显示错误

我的路线是这样的

import VueRouter from 'vue-router';

let routes = [
{
    path: '/',
    component: require('./views/Home')
},

{
    path: '/about',
    component: require('./views/Test')
},

{
    path: '/contact',
    component: require('./views/Contact')
}
];

export default new VueRouter({
routes,
linkActiveClass: 'is-active'
});

【问题讨论】：

这篇文章对我很有帮助，尤其是如果您使用的是 webpack v6 + stackoverflow.com/a/65609321/2867894

标签： webpack vue.js

【解决方案1】：

正如错误信息所暗示的：

您可能需要适当的加载程序来处理此文件类型。

您需要将vue-loader 添加到您的 webpack 配置中。

您可以在此处找到此类集成的示例：
https://github.com/vuejs-templates/webpack-simple

【讨论】：

感谢您的回答，在 webpack 配置中我有一个加载器。你可以在这里查看。 link 。无论如何，我尝试按照您发布的指南进行操作，但没有，同样的错误。可以下载试试看吗？
@str 您能否在此处添加一个集成示例到您的答案中？

【解决方案2】：

我最近刚刚通过恢复到 vue-loader v14 解决了这个问题

npm install vue-loader@14 --save-dev。

显然 v15 存在一些问题。

【讨论】：

v14 const vueComponent = () => import('./component.vue') 还是不行

【解决方案3】：

我遇到了类似的错误，并且很困惑，因为我确实有 vue-loader 并且其他 vue 组件正在工作。就我而言，我忘记将脚本语言指定为 TypeScript。请参阅本示例中的 lang="ts"：

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component({ name: 'readonlyrating' })
export default class ReadOnlyRating extends Vue {
...
}
</script>

【讨论】：

嗯.. 我将 vue-loader 和 ts 设置为脚本语言。然而我得到这个错误。遵循 MS 的指南：github.com/Microsoft/…

【解决方案4】：

就我而言，我忘了添加：

const { VueLoaderPlugin } = require('vue-loader')
...
plugins: [
  ...
  new VueLoaderPlugin(),
],

到 webpack 配置。

【讨论】：

【解决方案5】：

确保您不使用“包”等关键字或其他关键字。这在使用 PUG 预处理器时给了我同样的错误，但起初我不知道我使用的是关键字。我将其替换为“item”：v-for="package in packages" --> v-for="item in packages"。

.table__wrapper

    .table__row(v-for="package in packages" :key="package.objectID")

        .table__row-name {{ package.name }}

【讨论】：