The vue project is in ie11 and does not display the router-view view in App.vue. It is initially suspected that it is a vue routing problem.

there is no problem in mainstream browsers such as chrome, but there is a problem of white screen compatibility in ie11 browsers. The current situation is:
can display tags in the root view of App.vue, but cannot display < router-view > < / router-view > view, that is, route redirection is invalid. The
project is built with vue cli. Let"s take a look at the preliminary situation and report an error:
this is the code structure of the current App.vue page

clipboard.png
router-viewindex:

clipboard.png

:

clipboard.png
ie11router-viewde

clipboard.png
:

clipboard.png
have you ever encountered a boss in the same situation? I have been troubled by the compatibility problem of ie for more than half a day. At present, I only locate the problem here, while the prompt "read-only attributes are not allowed in strict mode". There is no clue at present. Do you have any solutions?

Javascript
Apr.28,2022

has been solved at present. At the beginning of
, it was the ie white screen directly, because the axios request was encapsulated into a separate external js file. For the time being, it is not clear why the ie white screen problem will be caused externally.
the problem that route-view does not show in the problem description is really caused by routing, because a route guard is written in main.js, and one of the values will become undefined in some cases, resulting in the ie cannot be displayed.
so the current solution is to write axios in the main.js file in the vue project, while using axios interceptor to intercept user rights, and there is no route guard using vue.
the rest of the operations that are compatible with ie can be solved by using babel-polyill, as mentioned on the Internet. Just pay attention to the configuration of your own project.

there is a babel-polyfill compatible IE that you can install to try 

npm install --save babel-polyfill

main.js 

import 'babel-polyfill'

replace webpack.base.conf.js with entry 

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

try

Previous: How React.js events are bound

Next: What are the problems when responsive websites introduce other pages through iframe?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu