Recently, VUE is used for the system related to customer service. Because it relies on third-party JS, JS needs to be introduced according to different environments. For example, a. JS is imported from the Internet and B. JS is imported from the Intranet. The scenario can be adjusted according to different requirements. We tried some methods in the middle, but none of them worked. Of course, the js should be loaded before the VUE is initialized, otherwise the system cannot load the relevant methods. Thinking in three, I decided to start with VUE’s index.html file. The index. HTML file for the project generated via vue-cli is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuehr</title> <script src="a.js"></script> </head> <body style="margin:0px; padding: 0px;" > <noscript> <strong>We're sorry but vuehr doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

The modified code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuehr</title> <! -- <script src="a.js"></script> --> </head> <script type="text/javascript"> var env = window.location.href; var url = ""; if (env.indexOf("aaa") ! = -1) { url = "<script src='a.js'></script>"; } else { url = "<script src='b.js'></script>"; } document.write(url); </script> <body style="margin:0px; padding: 0px;" > <noscript> <strong>We're sorry but vuehr doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

Of course, whether to add the parameter defer or async in the script depends on your project. Specific defer or async can reference segmentfault.com/q/101000000… .

If you found this post helpful, please like, bookmark or comment on it. Thank you.

Some reference documents:

Stackoverflow.com/questions/3…

Segmentfault.com/q/101000001…

Forum.vuejs.org/t/index-htm…

Segmentfault.com/q/101000000…