"您可能需要一个合适的加载器来处理此文件类型"webpack和vue

Question

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

节点\模块/。垃圾箱/网页包

我得到了一个错误：

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.

网页包显示每个扩展名为的文件中的错误。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'
});

Answer 1

我得到了类似的错误，并感到困惑，因为我确实有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>

Answer 2

我最近通过恢复到vue加载程序v14解决了这个问题

npm安装vue-loader@14--保存dev。

显然v15有一些问题。

Answer 3

正如错误消息所暗示的那样：

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

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

您可以在这里找到这种集成的示例：
https://github.com/vuejs-templates/webpack-simple