每当我想建立一个文件时,我总是会出错.原因是什么?

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

ERROR in Unexpected token >
 @ ./应用程序/应用程序.js 7:11-31

网页包.配置.js

var path = require("path");

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    app: './应用程序/应用程序.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 }
})

app/app.vue

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

<script>

    export default {
      data () {
        return {
          msg: 'Hello from vue-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-这把 keys vue: ...loader: babel不是必需的.

Vue.js相关问答推荐

正在try 访问vutify中v-select(ItemProps)的嵌套json值

如何在Vue 3中将动态特性从主零部件同步到子零部件

Vuetify快速失败不会阻止发送表单

vue js如何将布尔值传到数据库

当try 更新 Vue 3 中的关联数组中的单个元素时,所有值都会更新

Vue-tables-2(vuex)react性不起作用

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

Eslint Vue 3 解析错误:'>' expected.eslint

为什么组件在 v-if 下没有被销毁

正确实现 Vue.js + DataTables

如何更新手动安装的 vue 组件上的props?

Vue.js + Vuex:如何改变嵌套项状态?

Vue-Router 抽象父路由

验证子组件Vue vee-validate

如何在 vue 3 中获取路由的参数?

Vue.js 无法切换字体真棒图标

从 Axios 响应中解析 XML,推送到 Vue 数据数组

如何将数据传递给 Vue.js 中的路由视图

如何从 vue 组件调用 App.vue 中的方法

是否有 v-cloak 逆?