Vue 官方已经将 Vue CLI 设置为维护模式, Vite 也正式成为了 Vue 官方推荐的构建工具，这里就总结一下这次升级带来的一些简单变化。照例，官方文档地址在这里
Vite 默认的目标平台
Vite 默认的目标平台是现代浏览器，我们引用官方的描述：
用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器：
Chrome >=87
Firefox >=78
Safari >=13
Edge >=88
你也可以通过 build.target 配置项 指定构建目标，最低支持 es2015。
最低支持到 es2015 对于很多传统浏览器来说，还是太新了，我们如何支持传统浏览器呢？ 官方提供了 @vitejs/plugin-legacy 插件来帮助我们，继续抄一下官方
传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。
安装方法如下：
npm add -s @vitejs/plugin-legacy
npm add -s terser // Terser 也是需要安装的，因为 plugin-legacy 使用 Terser 做 minification.
然后修改 vite.config.js:
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
vue(),
legacy(),
],
})
关于 @vitejs/plugin-legacy 的更多配置选项，可以参考 @vitejs/plugin-legacy
index.html
相较于 Vue CLI 的中 index.html 默认位于 public 目录下，Vite 的 index.html 是直接在项目最外层的，这是有意为之的变化，在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。也就是说，如果你把 index.html 放到了别的位置，那么你的 npm run dev 启动的网页，在默认配置下就无法工作了。
有很多朋友可能更习惯于将 index.html 放到 src 目录下，而不是 Vite 项目的根目录，那么我们需要修改如下配置：
// vite.config.js
export default defineConfig({
root: './src', // 将 Vite 项目的根目录设置为 ./src
});
该选项拥有相当大的副作用，它实际上是将整个项目的根目录都重新指定到了 ./src 下，这会导致打包输出的结果 ./dist 实际的目录是 ./src/dist, 而和 ./src 同级的 ./public 里的文件，并不会再被作为 public 文件打包了，为了解决这两个问题，我们还需要对配置做如下修改：
// vite.config.js
export default defineConfig({
root: './src', // 将 Vite 项目的根目录设置为 ./src
publicDir: '../public', // 此时的相对路径，已经以 `./src` 作为了起点，这样我们才重新指向了原来的 public 文件
build: {
outDir: '../dist', // 此时的相对路径，已经以 `./src` 作为了起点，这样我们才重新指向了原来的 dist 文件夹
emptyOutDir: true, // 由于 build.outDir 被设置在 root 外部，Vite 将默认不清空这个 outDir（这是为了），我们需要开启这个选项，才能让 Vite 在每次打包的时候继续清空 outDir
},
});
可以看到上面的相对路径起点相当的混乱，对于 root 而言，它显然仍然是以 vite.config.js 所在目录作为起点，而对于 publicDir 和 build.outDir, 他们又在以 root 下指定的目录作为起点，为了减少这种混乱带来的心智成本，我们不妨直接全部改用绝对路径，如下：
// vite.config.js
export default defineConfig({
root: fileURLToPath(new URL("./src", import.meta.url)),
publicDir: fileURLToPath(new URL("./public", import.meta.url)),
build: {
outDir: fileURLToPath(new URL("./dist", import.meta.url)),
emptyOutDir: true,
},
});
如果是新开的项目，那么还是推荐直接使用默认的 index.html 位置，减少配置成本。
之前的入口文件 (main.js) 配置去哪里了？
在 Vite 中，main.js 的路径，不再像 Vue CLI 一样，体现在配置文件中了，
其实我们打开 index.html 后不难发现，其实 main.js 在它里面引入了。
<script type="module" src="./main.js"></script>
如果你需要为这个 index.html 指定其他入口文件，那显然只需要修改上面的代码就可以了。
Vite 在打包的时候，会把这一句话去掉，改为引入打包后的 js 文件
base
可以起到和 Vue CLi 中的 publicPath 一样的作用，当你的网站需要在非根目录下访问的时候使用。更详细的介绍可以看这里