Bootsrap-vueのMultiple instances of Vue detected!の警告を解消できずに困っています。

Question

前提・実現したいこと

現在gulp及びbrowsifyを利用している、vue.jsプロジェクトにBootstrap-vueを導入したところですが、以下警告が表示され困っています。
公式サイトやGitHubなどを見て解決を試みたのですが、解決できませんでしたので、お力添えをいただければ非常に助かります!

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

[BootstrapVue warn]: Multiple instances of Vue detected!
You may need to set up an alias for Vue in your bundler config.
See: https://bootstrap-vue.org/docs#using-module-bundlers

vue.runtime.common.dev.js:621 

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
VM43:146 serviceWorker registed.

vue.common.dev.js:9054

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

vue.runtime.common.dev.js:8406

原因

Bootstrap-vueの公式サイトに書いてある、Aliasing Vue importが原因だと思います。

If you are using a specific build of Vue (i.e. runtime-only vs. compiler + runtime), you will need to set up an alias to 'vue' in your bundler config to ensure that your project, BootstrapVue and PortalVue are all using the same build version of Vue. If you are seeing an error such as "$attr and $listeners is readonly", or "Multiple instances of Vue detected", then you will need to set up an alias.

こちらを見るに、Bootstrap-vueの内部的に reqire 'vue'とvueを呼び出していますが、この呼び出しているvueがBootstrap-vueでは、 vue.runtime.common.js　であるのに対し、プロジェクトで参照しているのはvue.common.jsであるため、２つのvueインスタンスが見つかり、エラーが起こっているようです。

試したこと

公式サイトに書いてあるように import Vue from 'vue'やrequire 'vue'とした時にvue.common.jsを共通的に見に行ってほしいのですが、どうにもうまくいきません。

バンドラーにwebpackを利用している場合、以下のように記載すれば解決するようですが、プロジェクトの都合でbrowesifyを利用する制限があります。

// webpackの場合
module.exports = {
  // ...
  resolve: {
    alias: {
      // If using the runtime only build
      vue$: 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1
      // Or if using full build of Vue (runtime + compiler)
      // vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

[vue.jsの公式サイト][https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only]を参考にしながら、package.jsonに以下のように記載したのですが、エラー内容も変わらず、複数のvueインスタンスが生成されてしまっているようです。

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

また、Bootstrap-vueのGitHubのissueを見てBootstrapVueの呼び出し方を変えて見ましたが、これまたエラー内容に変わり有りませんでした。

// import Vue from 'vue'
// import BootstrapVue from 'bootsrap-vue'
// Vue.use(BootstrapVue)
// ↑こちらとエラー内容に変わりなし
Vue.use(require('bootstrap-vue/dist/bootstrap-vue.common.min'));

補足情報（FW/ツールのバージョンなど）

vue: 2.6.10
bootstrap-vue: 2.15.0

色々試したのですが、万策尽きたという感じです。
もし似たような問題を見たことがある、解決したことがあるという方はご意見をお聞かせください

Answer 1

自己解決しました!

There is a special "browser" field you can set in your package.json on a per-module basis to override file resolution for browser-specific versions of files.

For example, if you want to have a browser-specific module entry point for your "main" field you can just set the "browser" field to a string:

"browser": "./browser.js"
or you can have overrides on a per-file basis:

"browser": {
"fs": "level-fs",
"./lib/ops.js": "./browser/opts.js"
}
Note that the browser field only applies to files in the local module, and like transforms, it doesn't apply into node_modules directories.

公式のここにbrowserフィールドはnode_modeulesには使えないとはっきり書いてくださってました。

しっかり、公式ドキュメントを読み直したら、ちゃんとrequire.resolveをできるオプションを用意してくださってました。(参考)[https://github.com/browserify/browserify#brequirefile-opts]

これを利用し、以下のようにgulp.jsに追記しました。

.transform(babelify)
.require('vue/dist/vue.common.js',{expose: 'vue'}) //追加
.bundle()