9

每当我想构建文件时，我都会不断收到错误消息。它的原因是什么？似乎 .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'
    }
  }
}

包.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"
  }
}

应用程序/应用程序.js

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

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

应用程序/应用程序.vue

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

<script>

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

4

3 回答 3

5

您需要做一些额外的配置才能使加载程序正常工作。

我强烈建议您使用vue-clifor setup 一切正常。

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，不是必需的。

于 2017-03-19T17:14:54.057 回答
1

在使用vue的项目中，个人不建议单独配置webpack和vue-loader。可以直接使用vue官方脚手架，vue-cli。不用考虑这些配置，自动配置。Vue-cli

如果你刚开始学习 Vue，这里有一个入门级的演示。虽然只是一个小应用，但是涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端，后端、数据库等网站的一些必要元素，对我来说，学习意义重大，希望互相鼓励！

Vue 演示

于 2017-06-08T10:20:19.700 回答
0

你在使用带有 ESLint 的 vue-cli 吗？如果这样做，则需要在最后一个元素事件和分号后的每个元素事件后使用逗号。

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

new Vue({
  el: 'body',
  components: { App },
});
于 2017-04-01T16:30:59.567 回答