When the vue website opens the white screen for the first time, you need to refresh it before you can enter it.

Mar.07,2021

Does this problem occur every time the code is updated?

if so, maybe:

the reasons are as follows:

  1. three js files such as vendor.xxx.js generated by webpack at compile time have random hash names, (vendor mainfest app, and the three js may not all be regenerated);
  2. caching is enabled on the nginx server;
  3. the cached browser accesses three old js files, because the old file was deleted when it was published, so the vue code becomes invalid and a white page appears.

solution:

first: close the nginx cache;
second: change the compilation strategy without adding hash value;
third: change the online mode and do not delete the old version of js files


there is something wrong with your webpack packaging. It took 1.8 seconds for vendor.js 1.2MB to load. You can use the webpack lazy load function.

you can also do some animation in < div id= "app" > < / div >.


have you solved it?
I have the same problem.
this problem occurs when cdn + externals is used

    <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="//cdn.bootcss.com/element-ui/2.3.6/index.js"></script>
externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'element-ui': 'ElementUI'
  }

this is the problem I have now. Have you solved it?


how did you solve this problem

Menu