vueプロジェクトのホワイトスクリーンの問題のまとめ、マルチソリューションの詳細な解決
さあ、兄弟、焦らないで、ゆっくり下を見ましょう.プロジェクトをパッケージ化した後、ローカルでファイルを開いて白い画面を表示しましたか?微信の公衆番号にプロジェクトの白い画面が開きましたか?アップルの携帯は白い画面を開けましたか?一部のiPhone機種は白画面で表示されていますか?兄弟、焦らないで、歩きましょう.
1,ios 10に白い画面が表示されます
なぜならios 10のSafariでは、パラメータと同じ名前のforループ反復変数を定義すると、構文エラーだと勘違いしているためです.解決策は次のとおりです.
buildフォルダに入ります.Webpackを見つけます.prod.conf.jsファイル;UglifyPluginの定義にmangleに関するオプションを追加し、次のようにします.
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, mangle: { safari10: true } }, sourceMap: config.build.productionSourceMap, parallel: true }),
2,Swiperプラグインによるホワイトスクリーン
解決策は、プロジェクトのルートディレクトリの下にファイルvueを新規作成することです.config.jsは、次の文を追加します.
module.exports = { chainWebpack: config => { config.rule(‘js’).include.add(/node_modules/(dom7|swiper)/.*/) } }
3,npm run buildパッケージページ空白
パッケージ化後、distフォルダの下のindexを直接ローカルに開きます.htmlファイル、結果は白いスクリーンになりました!ページheadで参照されているjsファイルとcssファイルにパスエラーが発生していることがわかります.ここでは、次のように変更します.
解決位置:config/index.jsファイル:assetsPublicPath:'/'をassetsPublicPath:'./'に変更
build:{assetsPublicPath:'./',}4,アップグレードvue 2+一部携帯電話アクセスページ空白
npm run dev後にルーティングテンプレートにロードできない情報が表示される場合があります.
解決位置:config/index.jsファイル:devtool:'#eval-source-map'をdevtool:'inline-source-map'に変更
5,アップグレードvue 2+IPアクセスページ空白
デフォルトではlocalhostまたは127.0.0.1でのみアクセスできますが、ネイティブのIpアドレスを使用するとアクセスできない場合があります.
解決位置:config/index.jsファイル:config/index.jsの「host」を「0.0.0.0」に設定すれば解決できるか、パソコンのIPアドレスに設定してもいいです.
6,VueはIE、低バージョンAndroidで空白の問題を表示する
これはIEのpromiseに対するサポートが悪いためです.babel-polyfillとes 6-promiseをインストールする必要があります.
npm install babel-polyfill npm install es6-promise
そしてmain.jsファイルでの参照:
最後にbase.conf.jsファイルでは、次のように構成されています.
module.exports = { entry: { app: [“babel-polyfill”, “./src/main.js”] } };
以上の方法を通じて、すでに基本的にあなたが出会った大部分の白画面の問題を解決することができますが、まだ一部のリンゴが白画面を表示している可能性があります.本当に特殊で、本当に頭が痛くて、兄弟は焦らないで、下を見てください.そこで理性的な分析を開始し、まずホワイトスクリーンの原因は静的資源のロードに関連していないため、パッケージ後のindexを優先的に調べる.htmlファイル、ファイルの中で資源の経路を引用するのはすべて引用符がないことを発見して、梱包した後に引用符を持っていないで引き起こしたのではありませんか?Webpackでprod.conf.jsはminifyパラメータを見つけてremoveAttributeQuotes:trueをremoveAttributeQuotes:falseに変更し、自動的に引用符を追加しました. この時、パッケージしたページを開くと、ページの一部が空白の場合に遭遇する可能性があります.あれ?これはどんな状況ですか.一般的にこのような状況は、静的ピクチャリソースをbackgroundとしてパッケージ化した後、パスが間違っているためです.buildフォルダの下にあるutilsを開きます.jsファイル、次のコードを見つけてpublicPathを追加し、 に変更します.
OK、ここであなたが出会った問題はすでに基本的に解決することができて、もしまだ問題があれば、私は一言しか言えません:兄弟、哀悼の意を表します!弟には最後の手があります.プロジェクトをedgeの低バージョンで実行し、コードが間違っているかどうかを見てみましょう.すべてが正常であれば、プログラマーの鳥居を立てるしかありません.本アプリケーションは大衆ユーザーにサービスしています.個別のユーザーに問題があれば、大流に従って大衆設備を交換してください.
博主:小聖賢君、問題があれば伝言してもいいですよ.
1,ios 10に白い画面が表示されます
なぜならios 10のSafariでは、パラメータと同じ名前のforループ反復変数を定義すると、構文エラーだと勘違いしているためです.解決策は次のとおりです.
buildフォルダに入ります.Webpackを見つけます.prod.conf.jsファイル;UglifyPluginの定義にmangleに関するオプションを追加し、次のようにします.
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, mangle: { safari10: true } }, sourceMap: config.build.productionSourceMap, parallel: true }),
2,Swiperプラグインによるホワイトスクリーン
解決策は、プロジェクトのルートディレクトリの下にファイルvueを新規作成することです.config.jsは、次の文を追加します.
module.exports = { chainWebpack: config => { config.rule(‘js’).include.add(/node_modules/(dom7|swiper)/.*/) } }
3,npm run buildパッケージページ空白
パッケージ化後、distフォルダの下のindexを直接ローカルに開きます.htmlファイル、結果は白いスクリーンになりました!ページheadで参照されているjsファイルとcssファイルにパスエラーが発生していることがわかります.ここでは、次のように変更します.
解決位置:config/index.jsファイル:assetsPublicPath:'/'をassetsPublicPath:'./'に変更
build:{assetsPublicPath:'./',}4,アップグレードvue 2+一部携帯電話アクセスページ空白
npm run dev後にルーティングテンプレートにロードできない情報が表示される場合があります.
解決位置:config/index.jsファイル:devtool:'#eval-source-map'をdevtool:'inline-source-map'に変更
5,アップグレードvue 2+IPアクセスページ空白
デフォルトではlocalhostまたは127.0.0.1でのみアクセスできますが、ネイティブのIpアドレスを使用するとアクセスできない場合があります.
解決位置:config/index.jsファイル:config/index.jsの「host」を「0.0.0.0」に設定すれば解決できるか、パソコンのIPアドレスに設定してもいいです.
6,VueはIE、低バージョンAndroidで空白の問題を表示する
これはIEのpromiseに対するサポートが悪いためです.babel-polyfillとes 6-promiseをインストールする必要があります.
npm install babel-polyfill npm install es6-promise
そしてmain.jsファイルでの参照:
import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
最後にbase.conf.jsファイルでは、次のように構成されています.
module.exports = { entry: { app: [“babel-polyfill”, “./src/main.js”] } };
以上の方法を通じて、すでに基本的にあなたが出会った大部分の白画面の問題を解決することができますが、まだ一部のリンゴが白画面を表示している可能性があります.本当に特殊で、本当に頭が痛くて、兄弟は焦らないで、下を見てください.
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
}
OK、ここであなたが出会った問題はすでに基本的に解決することができて、もしまだ問題があれば、私は一言しか言えません:兄弟、哀悼の意を表します!弟には最後の手があります.プロジェクトをedgeの低バージョンで実行し、コードが間違っているかどうかを見てみましょう.すべてが正常であれば、プログラマーの鳥居を立てるしかありません.本アプリケーションは大衆ユーザーにサービスしています.個別のユーザーに問題があれば、大流に従って大衆設備を交換してください.
博主:小聖賢君、問題があれば伝言してもいいですよ.