Vue-cli2 es6 の互換性の問題により画面が白くなる

Vue-cli2 es6 の互換性の問題により画面が白くなる

Vue プロジェクトに関して、ブラウザ上で白い画面が開くケースの多くは es6 の構文の非互換性が原因となっておりますので、その解決方法を以下にお話しさせていただきます。

解決

1. インストールbabel-polyfill es6-promiseパッケージ

npm i babel-polyfill es6-promise --save

2. 次に、main.js以下を追加します。

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

注意:import 'babel-polyfill' は、'vue' から Vue をインポートする前に導入する必要があります。

3.webpack.base.conf.js以下を追加します

module.exports = {
	...
     entry: {
     app: ["babel-polyfill", "./src/main.js"]
     }
     ...
}

構成後も画面が空白の場合は、新しく追加されたサードパーティの依存関係に es6 構文が含まれている可能性があります。Babel-polyfill は、node_modules 内の es6 を検出しないため、手動で追加する必要があります。たとえば、私の新しい依存関係は次のとおりですswiper

解決

webpack.base.conf.jsファイル内の構成を変更しますbabel-loader。

{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/swiper') ,resolve('node_modules/webpack-dev-server/client')]},

その後、プロジェクトを再起動します

Vue-cli3 ES6 構文の非互換性により、高確率で白い画面が発生しますが、これはサードパーティ依存パッケージの原因でもあり、その解決策は添付されています