web-dev-qa-db-ja.com

Vue --webpackvue-loader構成

ファイルを作成したいときはいつでもエラーが発生し続けます。その理由は何ですか？ .vueファイルはwebpackで認識できないようですが、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!'
        }
      }
    }
javascriptwebpackvue.jsvue-loader
9
Paweł Kosiński

ローダーが正しく機能するために必要な追加の構成がいくつかあります。

セットアップはすべて正常に機能するため、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は必要ありません。

4
Edmundo Rodrigues

Vueを使用するプロジェクトでは、個人がwebpackとvue-loaderを別々に構成することをお勧めしません。 vue公式のスキャフォールディング、vue-cliを直接使用できます。自動的に構成されたこれらの構成を考慮する必要はありません。 vue-cli

Vueの学習を始めたばかりの場合は、ここにエントリーレベルのデモがあります。小さなアプリケーションですが、フロントエンド、バックエンドなど、多くの知識ポイント（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack）をカバーしています。 、データベース、その他のサイト私にとって必要な要素のいくつかは、大きな意味を学び、お互いに励まし合いたいと思っています。

Vueデモ

1
AlloyTeamZy

ESLintでvue-cliを使用していますか？その場合、最後とセミコロンのすべての要素イベントの後にコンマが必要です。

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

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