Vite是如何兼容旧版本浏览器的

最新推荐文章于 2024-07-17 17:11:57 发布

JackieChan_

最新推荐文章于 2024-07-17 17:11:57 发布

阅读量396

点赞数 3

分类专栏： vite 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/longxiaobao123/article/details/138484394

版权

vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script type="module" crossorigin src="/assets/index-7bacbbdc.js"></script>
    <link rel="stylesheet" href="/assets/index-ea6784f3.css" />
    
    <script type="module">
      import.meta.url;
      import('_').catch(() => 1);
      async function* g() {}
      if (location.protocol != 'file:') {
        window.__vite_is_modern_browser = true;
      }
    </script>
    
    <script type="module">
      !(function () {
        if (window.__vite_is_modern_browser) return;
        console.warn('vite: loading legacy chunks, syntax error above and the same error below should be ignored');
        var e = document.getElementById('vite-legacy-polyfill'),
          n = document.createElement('script');
        (n.src = e.src),
          (n.onload = function () {
            System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'));
          }),
          document.body.appendChild(n);
      })();
    </script>
    
  </head>
  <body>
    <div id="app"></div>

    <script nomodule crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-3189795e.js"></script>
    
    <script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-151e35d2.js">
      System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'));
    </script>
  </body>
</html>

在这里插入图片描述

<script type="module">
  !(function () {
    if (window.__vite_is_modern_browser) return;
    console.warn('vite: loading legacy chunks, syntax error above and the same error below should be ignored');
    var e = document.getElementById('vite-legacy-polyfill'),
      n = document.createElement('script');
    (n.src = e.src),
      (n.onload = function () {
        System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'));
      }),
      document.body.appendChild(n);
  })();
</script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 代码执行，加载index文件 -->
    <script type="module" crossorigin src="/assets/index-7bacbbdc.js"></script>
    <!-- 代码执行，报错，__vite_is_modern_browser为undefined -->
    <script type="module">
      import.meta.url;
      import('_').catch(() => 1);
      async function* g() {}
      if (location.protocol != 'file:') {
        window.__vite_is_modern_browser = true;
      }
    </script>

    <!-- 代码执行，加载兼容的polyfills-legacy文件 和 index-legacy文件 -->
    <script type="module">
      !(function () {
        if (window.__vite_is_modern_browser) return;
        console.warn('vite: loading legacy chunks, syntax error above and the same error below should be ignored');
        var e = document.getElementById('vite-legacy-polyfill'),
          n = document.createElement('script');
        (n.src = e.src),
          (n.onload = function () {
            System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'));
          }),
          document.body.appendChild(n);
      })();
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- 不执行 -->
    <script nomodule crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-3189795e.js"></script>
    <!-- 不执行 -->
    <script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-151e35d2.js">
      System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'));
    </script>
  </body>
</html>