import Vue from'vue'のデフォルトはvue.runtime.common.jsです.
Webpackを利用したVueプロジェクトではmain.jsでimport Vue from'vue'で導入したVueのパッケージを使用していますが、機能が不備でruntime-only方式を提供しているだけで、一般ページでVueを使用するような機能は提供されていません.
パッケージの検索規則
(1)プロジェクトルートディレクトリでnode_があるかどうかを検索するmodulesのフォルダ
(2)node_modulesでは、パッケージ名に基づいて、対応するvueフォルダを探します
(3)vueフォルダでpackage.jsonというパッケージプロファイルを探します
(4)package.jsonファイルで、mainプロパティを検索します. のエントリファイル
Vueパッケージのpackage.jsonファイルでmain属性で指定されたエントリファイル【main】:[dist/vue.runtime.common.js]]のため、main.jsでimport Vue from'vue'でインポートしたVueコンストラクタを使用すると、機能が不十分です.
解決策:
(1)import Vue from '../node_modules/vue/dist/vue.js'
(2)Vueパッケージのpackage.jsonファイルでmain属性で指定されたエントリファイルを「main」:「dist/vue.js」に変更します.
(3)プロジェクトのwebpack.config.jsにresolve属性を追加する
パッケージの検索規則
(1)プロジェクトルートディレクトリでnode_があるかどうかを検索するmodulesのフォルダ
(2)node_modulesでは、パッケージ名に基づいて、対応するvueフォルダを探します
(3)vueフォルダでpackage.jsonというパッケージプロファイルを探します
(4)package.jsonファイルで、mainプロパティを検索します. のエントリファイル
Vueパッケージのpackage.jsonファイルでmain属性で指定されたエントリファイル【main】:[dist/vue.runtime.common.js]]のため、main.jsでimport Vue from'vue'でインポートしたVueコンストラクタを使用すると、機能が不十分です.
解決策:
(1)import Vue from '../node_modules/vue/dist/vue.js'
(2)Vueパッケージのpackage.jsonファイルでmain属性で指定されたエントリファイルを「main」:「dist/vue.js」に変更します.
(3)プロジェクトのwebpack.config.jsにresolve属性を追加する
resolve: {
alias: {
// Vue
"vue$" : "vue/dist/vue.js"
}
}