Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Lower version browser compatibility

Modern mode

With Babel we can take care of all the latest ES2015+ language features, but it also means we need to deliver translated and polyfilled packages to support older browsers. These translated packages are generally wordier and slower than native ES2015+ code. Most modern browsers now support native ES2015, so it’s a waste of time to deliver clunky code to support older browsers.

Vue CLI provides a “modern mode” to help you solve this problem. Build in the production environment using the following command:

vue-cli-service build --modern
Copy the code

The Vue CLI produces two versions of the application: a modern package for modern browsers that support ES Modules, and an older package for older browsers that don’t.

What’s cool is that there are no special deployment requirements. The generated HTML files automatically use the techniques discussed in Phillip Walton’s wonderful blog post:

  • The modern version of the package will pass<script type="module">Loading in supported browsers; They’ll still be used<link rel="modulepreload">Preloading.
  • Older packages will pass<script nomodule>Load, and is ignored by browsers that support ES Modules.
  • One for Safari 10<script nomodule>The fixes are automatically injected.

For details, see browser compatibility on vUE official website

Host check is enabled by default. The Internet cannot be accessed

The external network penetrates ngrok win

1. Installation and use

Download link

The Windows version is 32 bits

2. Decompress the download

3. Run the CD command to go to the decompressed directory

4. Run the ngrok HTTP port number

For example, ngrok HTTP 8050

Finally, the arrow below is your Intranet proxy domain name: one of them is ok

Final problem: In the new version of VUE-CLI, host check will be enabled by default. The external network cannot be accessed

The solution

Set disableHostCheck to true (no vue.config.js created manually)

Module. exports = {devServer: {port: 8050, // port disableHostCheck: true},}Copy the code

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Mobile frequently asked Questions

Mobile end horizontal and vertical screen adaptation and bangs adaptation

Use Canvas to get the red seal on the photo

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage