Vue - webpack vue-loader 配置

Question

每当我想构建文件时，都会遇到错误。这是什么原因呢？ 似乎webpack无法识别.vue文件，但webpack配置文件看起来正常。 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!'
        }
      }
    }

- Paweł Kosiński

---

尝试将 es2015 预设移动到单独的 .babelrc 文件中。它应该类似于这样：{ "presets": ["es2015"], "comments": false }更多信息请查看 https://github.com/bedakb/vuewp/blob/master/.babelrc 还要考虑不将 vue 应用程序挂载到 body 标记上， - Belmin Bedak

@BelminBedak 我已经做了，但错误仍在发生。 - Paweł Kosiński

啊，由于您正在使用webpack 2，现在不能省略-loader关键字。请将loader: 'vue'更改为loader: 'vue-loader'。 - Belmin Bedak

在 export default {} 后面不是应该加上一个闭合的 </script> 吗？ - redconservatory

这里发现了一个错别字，component: { App } 应该是复数形式的 components。 - Belmin Bedak

Answer 1

有一些额外的配置需要进行，以使loader正常工作。

我强烈建议您使用vue-cli来设置所有工作正常。

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

基本上，在你的webpack.config.js文件中，你忘记或者出现了错误：

1- 加载器名称应该是loader: 'vue-loader'而不是loader: 'vue'。

2- 创建一个叫做resolve的键，并将内容设置为：

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

3- 这个 vue: ...loader: babel 的键并不是必须的。

- Edmundo Rodrigues

---

我在我的webpack配置文件中有多个入口点，我已经在这方面进行了一些工作。我不想通过vue-cli创建新项目来制造更大的混乱。然而，将来我会用这种方式初始化我的vue项目。谢谢 :) - Paweł Kosiński

哇！它是这样工作的吗？奇怪。无论如何，我也有点担心使用这些可以创建一切的工具，但在vue-cli的情况下，它非常简单和微小。尝试在演示文件夹中创建，并查看webpack.config。 - Edmundo Santos

你的方法绝对是正确的。但是，如果你来自Vue+Webpack教程，只想在其中添加vue-loader，那么只需将以下内容添加到webpack配置中即可： module: { loaders: [ { test: /\.vue$/, loader: 'vue-loader', }, ] } 我真的不知道为什么Vue文档在这一点上如此晦涩，并且强制你使用vue-cli，而只需通过NPM安装模块并添加一些行到webpack配置中就可以轻松解决。 - Franz B.

Answer 2

在使用Vue的项目中，个人不建议单独配置webpack和vue-loader。您可以直接使用Vue官方脚手架Vue-cli。无需考虑这些配置，自动配置。vue-cli 如果您刚开始学习Vue，这是一个入门级别的演示。虽然只是一个小应用程序，但涵盖了许多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端、后端、数据库等站点的一些必要元素，对我来说，具有很大的学习意义，希望互相鼓励！Vue Demo

- AlloyTeamZy

Answer 3

你正在使用带有ESLint的vue-cli吗？ 如果是的话，在最后一个元素事件之后需要加逗号和分号。

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

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

- victorm