質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.33%

vue.jsをwebpackが上手くできません

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 3,110

iride

score 18

前提・実現したいこと

単一ファイルコンポーネントをwebpackを用いて一から環境構築を行っています。
バンドル自体はできるのですが、できたファイルが上手く動作していません。
よろしくお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: Vue is not a constructor
    at Object.defineProperty.value (main.js:4)
    at __webpack_require__ (bootstrap fe6a50a69091bed6b855:19)
    at module.exports (bootstrap fe6a50a69091bed6b855:62)
    at bootstrap fe6a50a69091bed6b855:62

該当のソースコード

### package.json ###
{
    "scripts": {
        "start": "node app.js",
        "webpack": "webpack",
    },
    "dependencies": {
        "express": "3.2.6",
        "pug": "^2.0.0-rc.4",
        "vue": "^2.5.13"
    },
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.1",
        "css-loader": "^0.28.9",
        "html-loader": "^0.5.5",
        "vue-loader": "^13.7.0",
        "vue-template-compiler": "^2.5.13",
        "webpack": "^3.10.0"
    }
}
### webpack.config.js ###
var path = require("path");

module.exports = {
    entry: "./src/js/main.js",
    output: {
        path : path.join(__dirname, "/public/js"),
        filename: "bundle.js"
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    }
};
### main.js ###
var Vue = require("vue");
var appOptions = require("./app.vue")

var app = new Vue(appOptions).$mount("#app")
### app.vue ###
<style scoped>
  h1 {
    color: #f00;
  }
</style>

<template>
  <h1>{{message}}</h1>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        message: 'Hello world!'
      }
    }
  }
</script>
### index.pug ###
extends layout

block content
  h1= title
  p Welcome to #{title}
  div(id="app")
  script(src="/js/bundle.js")

試したこと

vue-cliを使って、vuejs-templatesからの構築はできていました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

webpack.config.jsに下記を記述しても駄目ですか?

  resolve: {
    alias: {
      'vue': 'vue/dist/vue',
    }
  },

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/22 12:15

    記述を追加致しましたら、
    エラーは表示されませんが、仮想DOMに切り替わっていないのか、
    Hello world!の表示がされておりません。
    引き続き問題をご指摘いただけると幸いです。

    また、webpack3を使っているので、
    resolve: {
    alias: {
    'vue$': 'vue/dist/vue.esm.js'
    }
    }
    にしてみましたが、エラーが表示されたままになっております。
    今回のケースではこちらのやり方ではない理由についてもご教授いただけると幸いです。

    今回の構築ではこちらの記事を参考にしたつもりです。
    https://qiita.com/m0a/items/34df129d6d8991ebbf86

    キャンセル

  • 2018/01/22 17:27 編集

    参考のURLだと、Vue1.x時代の設定のようなので main.js を見直した方が良いかと思います。

    ```js
    new Vue({
    el: '#app',
    render: h => h(appOptions)
    })
    ```

    こんな感じにするとか…

    キャンセル

  • 2018/01/22 22:35

    ありがとうございました。
    おかげで無事同作させることができました。

    キャンセル

0

公式ドキュメントのVuewのインストールを読むと何かわかるかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る