web-dev-qa-db-fra.com

Vue - configuration webpack vue-loader

Je continue à avoir des erreurs chaque fois que je veux construire un fichier. Quelle est la raison de cela? Il semble que le fichier .vue ne soit pas reconnaissable par Webpack, mais le fichier de configuration de Webpack a l'air correct. Erreur webpack

bundle-app.js   189 kB       1  [emitted]  app
    + 12 hidden modules

ERROR in Unexpected token >
 @ ./app/application.js 7:11-31

webpack.config.js

var path = require("path");

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    app: './app/application.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle-[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: /src/,
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue',
      },
    ]
  },
  vue: {
    loaders: {
      js: 'babel'
    }
  }
}

package.json

"devDependencies": {
    "webpack": "~2.2.1",
    "babel-core": "~6.23.1",
    "babel-loader": "~6.3.1",
    "babel-preset-es2015": "~6.22.0",
    "sass-loader": "~6.0.0",
    "node-sass": "~4.5.0",
    "extract-text-webpack-plugin": "~2.0.0-rc.3",
    "vue-template-compiler": "~2.2.4",
    "css-loader": "~0.27.3",
    "vue-loader": "~11.1.4"
  },
  "dependencies": {
    "vue": "~2.2.4"
  }
}

app/application.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: 'body',
  component: { App }
})

app/app.vue

<template>
  <div id="app">
  </div>
</template>

<script>

    export default {
      data () {
        return {
          msg: 'Hello from vue-loader!'
        }
      }
    }

javascriptwebpackvue.jsvue-loader
6
Paweł Kosiński

Il y a quelques configurations supplémentaires que vous devez faire pour que le chargeur fonctionne correctement.

Je vous recommande fortement d’utiliser le vue-cli pour que tout fonctionne correctement.

npm install -g vue-cli
vue init webpack-simple hello
cd hello
npm install
npm run dev

En gros, à votre webpack.config.js, vous avez oublié/fait des erreurs dans:

1- Le nom du chargeur doit être loader: 'vue-loader' au lieu de loader: 'vue'.

2- Créez une clé appelée resolve, avec le contenu:

alias: {
  vue$: 'vue/dist/vue.common.js',
}

3- Et cette clé vue: ...loader: babel, n'est pas nécessaire.

3
Edmundo Rodrigues

Dans les projets qui utilisent vue, les utilisateurs ne recommandent pas de configurer séparément webpack et vue-loader. Vous pouvez directement utiliser l'échafaudage officiel de vue, vue-cli. Ne pas avoir à considérer ces configurations, configurées automatiquement. vue-cli

Si vous venez de commencer à apprendre Vue, voici une démo d’entrée de gamme. Bien qu'il ne s'agisse que d'une petite application, elle couvre de nombreux points de connaissance (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), y compris front-end, back-end , base de données et autres sites Certains des éléments nécessaires, pour moi, apprenant une grande signification, voudraient s’encourager mutuellement!

Vue Demo

1
AlloyTeamZy

Utilisez-vous vue-cli avec ESLint? Si vous le faites, vous avez besoin d’une virgule après chaque événement d’élément du dernier et du point-virgule.

import Vue from 'vue';
import App from './app.vue';

new Vue({
  el: 'body',
  components: { App },
});
0
victorm