vue2.0项目接入vite2实践2、vite默认只支持原生支持ESM的浏览器，但也可以通过官方的@vite/plugi

vue2.0全家桶项目开发阶段接入vite2

vite2.0版本，官方文档表示已经和框架无关，尝试一波
新项目接入可参考：juejin.cn/post/692791…

历史项目开发阶段接入：
1、引入Vite依赖 npm i vite vite-pugin-vue2 -D
2、在项目根目录添加并配置 vite.config.js

import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  base: '/',
  plugins: [
    // vue()
    createVuePlugin()
  ]
})

3、在项目根目录添加入口 index.html 文件
内容同public/index.html，直接引用 ESM 的入口 JS 文件, 例如
<script type="module" src="/src/main.ts"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="/favicon.ico">
    <link rel="dns-prefetch" href="">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

4、增加启动项
npm run vite

历史vue2.0项目接入会遇到的问题

1、项目中process.env 修改为 import.meta.env
2、项目中require引入方式修改为import

历史的一个项目开发环境接入vite2.0构建时间比较，提升大概3倍：

Vite2 github.com/vitejs/vite

1、vite2 使用esbuild代替rollup进行依赖打包，esbuild采用go实现编译为native代码，npm安装时动态去下对应平台的二进制包，支持 mac、linux 和 windows 2、vite默认只支持原生支持ESM的浏览器，但也可以通过官方的@vite/plugin-legacy来支持旧浏览器。

import legacyPlugin from 'vite-plugin-legacy'

export default {
  plugins: [
    // The default options are listed below. Pass nothing to use them.
    legacyPlugin({
      // The browsers that must be supported by your legacy bundle.
      // https://babeljs.io/docs/en/babel-preset-env#targets
      targets: [
        '> 0.5%',
        'last 2 versions',
        'Firefox ESR',
        'not dead',
      ],
      // Define which polyfills your legacy bundle needs. They will be loaded
      // from the Polyfill.io server. See the "Polyfills" section for more info.
      polyfills: [
        // Empty by default
      ],
      // Toggles whether or not browserslist config sources are used.
      // https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig
      ignoreBrowserslistConfig: false,
      // When true, core-js@3 modules are inlined based on usage.
      // When false, global namespace APIs (eg: Object.entries) are loaded
      // from the Polyfill.io server.
      corejs: false,
    })
  ]
}

3、多框架支持，vue,react

@vite/plugin-legacy: www.npmjs.com/package/vit…
esbuild参考
zhuanlan.zhihu.com/p/139219361
github.com/evanw/esbui…