Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the solution to the normal use of Vue compatible IE9 full function". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preface

Background situation

Vue-2.5.11

Vue-cli uses template webpack-simple

Http request: axios

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

ES6 compatible

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

After the installation is complete, it can be referenced directly in the first line of the project's main entry file main.js

In the code generated by the project using vue-cli, the root directory has a .babelrc file, which is the configuration file for the project to use babel. Add "useBuiltIns": "entry" to the default generated template content, which is a setting that specifies what needs to be polyfill (compatible)

There are three setting options for useBuiltIns

False-do nothing

Entry-split the polyfill requirements according to the support of the browser version, and only introduce polyfill that is not supported by the browser

Usage-detects the use of ES6/7/8, etc., in the code, and loads only the polyfill used in the code

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

After adding this code, most of the content in the project is compatible with the ie9 version.

Number object

Even after using babel-polyfill for code translation, it is found that there are still some new features of es6 that have not been solved, such as the parseInt and parseFloat methods of Number objects.

Es6 migrates the global methods parseInt () and parseFloat () to the Number object, and the behavior remains exactly the same. The purpose of this is to gradually reduce the global approach and gradually modularize the language.

To solve this problem, you do not need to introduce a package to solve this problem, and also add the following code to the project main entry file main.js (the code is as forward as possible, * after referencing babel-polyfill)

RequestAnimationFrame method

Window.requestAnimationFrame is an interface used by browsers for timing looping operations, similar to setTimeout, and its main purpose is to redraw web pages by frame.

The advantage of requestAnimationFrame is to make full use of the refresh mechanism of the display to save system resources. The monitor has a fixed refresh rate (60Hz or 75Hz), that is, it can only be redrawn 60 or 75 times per second. The basic idea of requestAnimationFrame is to keep pace with this refresh rate and use this refresh rate for page redrawing. In addition, with this API, refreshing stops automatically once the page is not in the browser's current tab. This saves CPU, GPU and power.

One thing to note, though, is that requestAnimationFrame is done on the main thread. This means that if the main thread is very busy, the animation of requestAnimationFrame will be greatly reduced.

The window.requestAnimationFrame () method tells the browser that you want to perform the animation and asks the browser to call the specified function to update the animation before the next redraw. This method takes a callback function as an argument, which is called before the browser redraws.

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

The * compatible ie version of window.requestAnimationFrame () is 10, so you need to make requestAnimationFrame polyfill to be compatible on ie9.

Gist:requestAnimationFrame polyfill

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

Http network request (cross-domain)

In most Web projects (take JavaWeb as an example), the pages and services (at least the controller layer) of the website are developed and deployed in the same project. In the new mode of large front-end, we recommend that the front-end and back-end of the website be completely separated as far as possible. The benefits and significance of front-end separation will not be discussed here.

Since the front and rear ends are separated, the deployment must be deployed independently, and different access paths will give rise to the problem of cross-domain access (the same site, different port numbers are also cross-domain).

Set the background here:

The server has fully enabled CROS cross-domain support.

Http components use axios

Axios sets withCredentials to true to carry cookie data when cross-domain access is enabled

High-version browsers (ie10+ or chrome, ff) only need to complete the functions in the background to support cross-domain data requests.

When axios makes a data request, it uses XMLHttpRequest object by default. When it detects that the current request is cross-domain access, axios will test whether the browser supports XDomainRequest object, and if so, use it first.

The XMLHttpRequest object of ie8 / ie9 does not support cross-domain access. The object does not support cross-domain access until after ie10. Microsoft's solution is to provide a XDomainRequest (XDR) object in ie8 / ie9 to solve cross-domain problems. Although this object can be successfully accessed across domains and return data, it is still a semi-finished product with incomplete functions, and its use has many restrictions:

XDR only supports GET and POST request methods.

XDR does not support custom request headers. If the server uses the custom parameters of header for authentication, it will not be available.

The Content-Type of the request header can only be set to text/plain

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, but cannot access the HTTPS interface.

XDR only accepts requests from HTTP/HTTPS

No authentication or cookies will be carried when the request is initiated

Although Microsoft provides a solution, it is a complete chicken rib, and it is simply unable to meet the data request requirements of various scenarios in the system, so there is nothing axios can do about the cross-domain data request of ie9.

* solution: proxy

Although axios has nothing to do with ie9 cross-domain, the front-end project packaged solution webpack provides an elegant and thorough solution to the problem: proxy

DevServer.proxy

The devServer.proxy function of webpack is realized by the http-proxy-middleware project.

The implementation principle is that the request proxy of the target location is the local request of the front-end service. since the proxy becomes a local request, there is no cross-domain problem. Axios will use the XMLHttpRequest object for data request, and everything will return to normal. Header, cookies, content-type, authentication and other contents are correctly passed to the server.

Configuration of webpack.config.js in the project

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

That is, the prefix of / api represents the server, so when using axios, you need to add the prefix of / api to each server request. Usually, in project development, you need to re-encapsulate the data request component axios to achieve the purpose of uniformly setting the default parameters and unifying the data request entry, so you only need to adjust the request prefix uniformly in the secondary encapsulated file.

However, webpack's devServer.proxy is only available in development mode, not in production mode. In the development mode, the debugging service can read the configuration contents of the webpack.config.js for real-time proxy, but before the project is deployed to the production environment, the project needs to be compiled and converted into a static js file, so it is impossible to request a proxy without the support of the debugging service.

Nginx configuration

Although the function of devServer.proxy can only work in the development mode, there is naturally a solution in the production mode. Usually, after the Vue project is compiled into the final js file, it only needs a static server, in which nginx is used as the choice, lightweight, high performance, high concurrency and reverse proxy service are all its advantages. The data request proxy function that needs to be done here uses the reverse proxy function of nginx.

The conf/nginx.conf file configuration adds the following

This configuration also proxies the target server location of the http://localhost:8081/myserver/ to the / api path of the local service, so that the data request problem in the production environment can also be solved.

This is the end of the content of "what is the solution for the normal use of Vue compatible IE9 full function". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.