SoFunction
Updated on 2025-04-05

A comprehensive solution to Vue compatible ie9 problem

Preface

Background

  1. vue - 2.5.11
  2. vue-cli using template webpack-simple
  3. http request:axios

Vue's official description of the compatibility of the ie browser version is ie9+, that is, ie9 and higher versions. After testing, Vue's core framework vuejs itself, as well as the official core plug-ins of the ecosystem (VueRouter, Vuex, etc.) can be used normally on ie9.

Vue's author You YuxiVue's study adviceIt is mentioned in the article that in order to better ecology/engineering the project, the new ECMAScript specifications should be learned and used as much as possible. Currently, ES6/ES2015 is a standard with high availability and stability, complete documentation, and there are also Ruan Yifeng in China.Getting started with ECMAScript 6》 has done a lot of document translation, and the development environment is perfect. However, older browsers do not support the es6 specification, especially the ie browser. Even the highest ie11 version does not support the es6 specification. This requires compatibility processing for all browsers that do not support ES6 features.

This article will target websites developed using the Vue ecosystem, based on the ie9 version, and achieve a comprehensive compatibility solution for full-featured and normal use.

ES6 compatible

In the ie9 environment, some new objects and expressions of es6 are not supported, and the solution is to use babel-polyfill Component, which can translate es6 code into es5 code that can be recognized by lower version browsers

npm i babel-polyfill --save-dev

After the installation is completed, you can directly reference it on the first line of the main entrance file of the project.

import 'babel-polyfill';

In the code generated by the project using vue-cli, there is a .babelrc file in the root directory, which is the configuration file used by the project using babel. In the default generated template content, add"useBuiltIns": "entry" The settings of the content, which is a setting that specifies which content needs to be polyfilled (compatible)

useBuiltIns has three settings options

  1. false - No operation is done
  2. entry - According to the support of the browser version, the polyfill requirements are introduced separately, and only polyfills that are not supported by the browser are introduced.
  3. usage - Detection code ES6/7/8Use of such as the use of only loading polyfills used in the code

Here it is recommended to set it to entry , complete .babelrc The content is as follows:

{
 "presets": [
 [
  "env",
  {
  "modules": false,
  "useBuiltIns": "entry"
  }
 ],
 "stage-3"
 ]
}

After adding these codes, most of the contents in the project are compatible with ie9 version

Number object

Even in use babel-polyfill After translating the code, I found that there are still some new features of es6 that have not been solved, such as the Number object. parseIntandparseFloat method

es6 to convert global methods parseInt()and parseFloat() , transplant toNumber On the object, the behavior remains completely unchanged. The purpose of this is to gradually reduce global methods and make the language gradually modular.

Solving this problem does not require introducing a package to solve it. Also add the following code in the main entry file of the project (the code is as high as possible, preferably in the reference. babel-polyfill after )

if ( === undefined)  = ;
if ( === undefined)  = ;

requestAnimationFrame method

It is an interface used by the browser for timed loop operations. It is similar to setTimeout. Its main purpose is to redraw web pages by frame.

requestAnimationFrame The advantage is that it makes full use of the refresh mechanism of the monitor to save system resources. The monitor has a fixed refresh frequency (60Hz or 75Hz), which means that it can only be redrawn at most 60 or 75 times per second.requestAnimationFrameThe basic idea is to keep in synchronization with this refresh frequency and use this refresh frequency to redraw the page. In addition, using this API, refresh will automatically stop once the page is not in the current tab of the browser. This saves CPU, GPU and power.

But there is one thing to note,requestAnimationFrameIt is done on the main thread. This means that if the main thread is very busy,requestAnimationFrame The animation effect will be greatly reduced.

() The method tells the browser that you want to execute the animation and requests the browser to call the specified function before the next repaint to update the animation. This method uses a callback function as a parameter, which is called before the browser repaints.

Some third-party components use this method, such as some file uploads and image processing components; then when this type of component is used under ie9, it will be reported.

SCRIPT5007: Expected object.

() The minimum compatibility ie version is 10, so to make a requestAnimationFrame polyfill to be compatible on ie9

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x <  && !; ++x) {
     = window[vendors[x]+'RequestAnimationFrame'];
     = window[vendors[x]+'CancelAnimationFrame'] 
                  || window[vendors[x]+'CancelRequestAnimationFrame'];
  }
 
  if (!)
     = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = (0, 16 - (currTime - lastTime));
      var id = (function() { callback(currTime + timeToCall); }, 
       timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
 
  if (!)
     = function(id) {
      clearTimeout(id);
    };
}());

Gist：requestAnimationFrame polyfill

This part of the code is also executed at the website entrance as much as possible

http network request (cross-domain)

In most web projects (taking JavaWeb as an example), the pages and services of the website (at least the controller layer) are developed and deployed in the same project. In the new model of the big front-end, we recommend that the front-end and back-end of the website be completely separated as much as possible. The benefits and significance of the separation of the front-end will not be described here.

Since the front and back ends are separated, the deployment must be independently deployed. Different access paths will cause cross-domain access problems (the same site and different port numbers are also cross-domain)

Set the background situation here:

  1. The server has been fully enabled CROS cross-domain support
  2. http component uses axios
  3. axios Set withCredentials to true Carry cookie data when cross-domain access is enabled

Higher version browsers (ie10+ or ​​chrome, ff) only need to complete the functions in the background situation to support cross-domain data request function

When axios makes data requests, the XMLHttpRequest object is used by default. When it detects that the current request is cross-domain access, axios will test whether the browser supports the XDomainRequest object. If it is supported, it will be used first.

The XMLHttpRequest object of ie8/ie9 does not support cross-domain access. This object only supports cross-domain access after ie10. Microsoft's solution is provided in ie8/ie9XDomainRequest(XDR) Objects are used to solve cross-domain problems. Although the object can be successfully accessed across domains and returned data, it is still a semi-finished product with incomplete functions. Its use has many limitations:

  1. XDR only supports two request methods: GET and POST
  2. XDR does not support custom request headers. If the server uses the header's custom parameters for authentication, it is not available.
  3. The Content-Type of the request header is only allowed to be set to text/plain
  4. XDR does not allow cross-protocol requests. If the web page is under the HTTP protocol, it can only request the interface under the HTTP protocol and cannot access the HTTPS interface.
  5. XDR only accepts HTTP/HTTPS requests
  6. Authentication or cookies are not carried when making a request

Although Microsoft has provided a solution, it is completely useless and cannot meet the data request requirements for various scenarios in the system. At this point, axios has no choice but to do anything about ie9's cross-domain data requests.

Perfect solution: proxy

Although axios is powerless to do with ie9 cross-domain, webpack, a solution for front-end project packaging, provides an elegant and thorough solution to the problem: agents

webpack's The function is fromhttp-proxy-middleware Project implementation

The implementation principle is to proxy the request at the target location to the front-end service local request. Since it is a request that the proxy becomes a local request, there is no cross-domain problem, and axios will use it backXMLHttpRequest When the object makes data requests, everything returns to normal. Header, cookies, content-type, authentication and other contents are correctly passed to the server.

Configuration in the project

devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true,
  proxy: {
    '/api': {
      target: 'http://localhost:8081/myserver',
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

The configuration specifies the http://localhost:8080/api that proxy the location of the http://localhost:8081/myserver service to the local front-end service. For example, the original request to read user information is http://localhost:8081/myserver/user/zhangsan. After proxying, it becomes http://localhost:8080/api/user/zhangsan.

That is, the prefix of /api represents the server, so when using axios, the prefix of /api needs to be added to each server request; usually in project development, the data request component axios needs to be secondary encapsulated to achieve the purpose of setting default parameters, unified data request portal, etc., so at this time, you only need to adjust the request prefix uniformly in the secondary encapsulation file.

However, webpack's Available in development mode only, not available in production mode. In development mode, debugging services can be readThe configuration content in the project is real-time agent, and before deploying to the production environment, the project needs to be compiled and converted into static js files. Without the support of the debugging service, it is naturally impossible to request proxy.

nginx configuration

AlthoughThe function of the Vue project can only work in the development mode, so there are naturally solutions in the production mode; usually, after compiling into the final js file, Vue projects only need a static server, which is the best choice for nginx, and lightweight, high performance, high concurrency, reverse proxy services, etc. are all their advantages. The data request proxy function that needs to be done here uses nginx's reverse proxy function

conf/Add the following contents to the file configuration

location /api/ {
  proxy_pass http://localhost:8081/myserver/;
}

This configuration also uses the /api path to the target server location proxy of http://localhost:8081/myserver/ as the local service. In this way, the data request problem in the production environment can also be solved.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.