web-dev-qa-db-fra.com

"Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier" webpack and vue

J'essaie de compiler webpack avec la commande: 

node_modules/.bin/webpack

et j'obtiens l'erreur:

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 affiche l'erreur dans chaque fichier avec l'extension .vue

mes routes ressemble à ceci 

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'
});
webpackvue.js
5
Lluís Puig Ferrer

Comme le message d'erreur l'indique:

Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier.

Vous devez ajouter vue-loader à la configuration de votre pack Web.

Vous pouvez trouver un exemple d'une telle intégration ici:
https://github.com/vuejs-templates/webpack-simple

2
str

J'ai eu une erreur similaire et j'étais confus parce que j'avais vue-loader et d'autres composants de vue fonctionnaient. Dans mon cas, j'avais oublié de spécifier le langage de script comme TypeScript. Voir lang = "ts" dans cet exemple:

<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>
1
Daniel