javascript - Vue - webpack vue-loader configuration - Stack Overflow

admin管理员组

文章数量:1344232

I keep getting error whenever I want to build a file. What is a reason of it? It seems that .vue file is not recognizable by webpack, but webpack configuration file looks properly. webpack error

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-piler": "~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',
  ponent: { App }
})

app/app.vue

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

<script>

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

I keep getting error whenever I want to build a file. What is a reason of it? It seems that .vue file is not recognizable by webpack, but webpack configuration file looks properly. webpack error

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-piler": "~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',
  ponent: { App }
})

app/app.vue

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

<script>

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

• javascript
• webpack
• vue.js
• vue-loader

Share Improve this question Follow asked Mar 19, 2017 at 11:45 Paweł KosińskiPaweł Kosiński 22266 silver badges1414 bronze badges 8

• 1 Try to move es2015 preset to separated .babelrc file.It should looks something like this { "presets": ["es2015"], "ments": false } For more info check here github./bedakb/vuewp/blob/master/.babelrc Also consider to NOT mount vue app to body tag, – Belmin Bedak Commented Mar 19, 2017 at 11:49
• @BelminBedak I've done it, but error's still occurring – Paweł Kosiński Commented Mar 19, 2017 at 12:07
• 1 Ah, since you are using webpack 2 you can't now omit the -loader keyword.Try change this loader: 'vue' to this loader: 'vue-loader' – Belmin Bedak Commented Mar 19, 2017 at 12:36
• 2 Aren't you missing a close </script> after the export default {} ...? – redconservatory Commented Mar 19, 2017 at 12:44
• 1 Found typo here ponent: { App } is should be ponents - plural. – Belmin Bedak Commented Mar 19, 2017 at 12:50

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 5

There are some extra configs that you need to do, to loader work properly.

I strongly remend you using the vue-cli for setup all working okay.

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

Basically, at your webpack.config.js, you forgot/made errors in:

1- Loader name should be loader: 'vue-loader' instead of loader: 'vue'.

2- Create an key called resolve, with the content:

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

3- And this key vue: ...loader: babel, isn't necessary.

In projects that use vue, individuals do not remend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.vue-cli

If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!

Vue Demo

Are you using vue-cli with ESLint? If you do, you need a ma after every element event in the last and the semicolon.

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

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

本文标签： javascriptVuewebpack vueloader configurationStack Overflow