【Vue】从 Vue CLI 到 Vite 的一些变化总结
<p>Vue 官方已经将 Vue CLI 设置为维护模式, Vite 也正式成为了 Vue 官方推荐的构建工具，这里就总结一下这次升级带来的一些简单变化。照例，官方文档地址<ahref="https://cn.vitejs.dev/config/">在这里</a></p><h2>Vite 默认的目标平台</h2><p>Vite 默认的目标平台是现代浏览器，我们引用官方的描述：</p><pre><code class="lang-txt">用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器：Chrome >=87
Firefox >=78
Safari >=13
Edge >=88
你也可以通过 build.target 配置项 指定构建目标，最低支持 es2015。</code></pre><p>最低支持到 es2015 对于很多传统浏览器来说，还是太新了，我们如何支持传统浏览器呢？<br>官方提供了 <ahref="https://github.com/vitejs/vite/tree/main/packages/plugin-legacy">@vitejs/plugin-legacy</a> 插件来帮助我们，继续抄一下官方</p><pre><code class="lang-txt">传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。</code></pre><p>安装方法如下：</p><pre><code class="lang-bash">npm add -s @vitejs/plugin-legacy
npm add -s terser // Terser 也是需要安装的，因为 plugin-legacy 使用 Terser 做 minification.</code></pre><p>然后修改 <code>vite.config.js</code>:</p><pre><code class="lang-js">import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
vue(),
legacy(),
],
})</code></pre><p>关于 <code>@vitejs/plugin-legacy</code> 的更多配置选项，可以参考 <ahref="https://github.com/vitejs/vite/tree/main/packages/plugin-legacy">@vitejs/plugin-legacy</a></p><h2>index.html</h2><p>相较于 Vue CLI 的中 index.html 默认位于 public 目录下，Vite 的 index.html 是直接在项目最外层的，这是有意为之的变化，在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。也就是说，如果你把 index.html 放到了别的位置，那么你的 <code>npm run dev</code> 启动的网页，在默认配置下就无法工作了。</p><p></p><p>有很多朋友可能更习惯于将 <code>index.html</code> 放到 src 目录下，而不是 Vite 项目的根目录，那么我们需要修改如下配置：</p><pre><code class="lang-js">// vite.config.js
export default defineConfig({
root: './src', // 将 Vite 项目的根目录设置为 ./src
});</code></pre><p>该选项拥有相当大的副作用，它实际上是将整个项目的根目录都重新指定到了 <code>./src</code> 下，这会导致打包输出的结果 <code>./dist</code> 实际的目录是 <code>./src/dist</code>, 而和 <code>./src</code> 同级的 <code>./public</code> 里的文件，并不会再被作为 <code>public</code> 文件打包了，为了解决这两个问题，我们还需要对配置做如下修改：</p><pre><code class="lang-js">// 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
},
});</code></pre><p>可以看到上面的相对路径起点相当的混乱，对于 <code>root</code> 而言，它显然仍然是以 <code>vite.config.js</code> 所在目录作为起点，而对于 <code>publicDir</code> 和 <code>build.outDir</code>, 他们又在以 <code>root</code> 下指定的目录作为起点，为了减少这种混乱带来的心智成本，我们不妨直接全部改用绝对路径，如下：</p><pre><code class="lang-js">// 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,
},
});</code></pre><p>如果是新开的项目，那么还是推荐直接使用默认的 <code>index.html</code> 位置，减少配置成本。</p><h2>之前的入口文件 (main.js) 配置去哪里了？</h2><p>在 Vite 中，main.js 的路径，不再像 Vue CLI 一样，体现在配置文件中了，<br>其实我们打开 <code>index.html</code> 后不难发现，其实 main.js 在它里面引入了。</p><pre><code class="lang-js"><script type="module" src="./main.js"></script></code></pre><p>如果你需要为这个 <code>index.html</code> 指定其他入口文件，那显然只需要修改上面的代码就可以了。<br>Vite 在打包的时候，会把这一句话去掉，改为引入打包后的 js 文件</p><h2>base</h2><p>可以起到和 Vue CLi 中的 publicPath 一样的作用，当你的网站需要在非根目录下访问的时候使用。更详细的介绍可以<ahref="https://cn.vitejs.dev/guide/build.html#public-base-path">看这里</a></p><h2>结语</h2><p>以上就是个人在开发过程中遇到的一些变化的总结，希望能对你产生一些帮助，感谢你的观看。</p>
<div class="post-copyright">
<div class="alert" role="alert">最后编辑时间为: September 4th , 2022 at 07:31 pm<br>本文由 <ahref="https://ma-zhe.com/index.php/author/1/">Warren Ma</a> 创作，采用 <ahref="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0</a> 国际许可协议进行许可<br>可自由转载、引用，但需署名作者且注明文章出处</div>
</div>
<div class="post-tags"></div>
页:
[1]