The problem

Vue projects need to consider browser compatibility, too annoying

reference

To solve

The project is based on VUE-CLI3

Vue-cli3 is very browser friendly. You only need to specify compatible browsers or versions. The project defaults to @vue/babel-preset-app, which uses the @babel/preset-env and Browserslist configurations to determine the polyfill the project needs, saving the package size.

By default, it passes useBuiltIns: ‘usage’ to @babel/preset-env so that it automatically detects needed polyfills based on language features present in the source code.

// babel.config.js
// Default Settings
module.exports = {
  presets: [
    '@vue/app'.'@babel/preset-env]} // Specify module.exports = {presets: ['@vue/app'['@babel/preset-env,
        { 'useBuiltIns': 'usage'}}]]Copy the code

package.json browserslistconfiguration

{
    "browserslist": [
        "defaults"."not IE < 10"."maintained node versions"]}Copy the code

.browserslistrcConfiguration file

# Browsers that we support

defaults
not IE < 10
maintained node versions
Copy the code

See more browserslist configuration ruleshere

Other frameworks

  1. According to the Babel – polyfill
npm install babel-polyfill --save-dev
Copy the code

2. Reference babel-polyfill in main.js

// main.js
import 'babel-polyfill'
Copy the code

3. Modify webpack and Entry configurations

module.exports = {
    entry: {
        app: ['babel-ployfill'.'./src/index.js']}}Copy the code

Other Compatibility (Message supplement)

1. Flex style compatibility

// Define the styleflex: 1 0; The third argument is usually omittedflex-basis, the defaultauto// But // Internet Explorer,flex-basisThe default value is0// Need to be manually specified // so the project needs to be compatible with IE //flexStyles are best written completely, such asflex: 1 0 auto;
Copy the code