vite（二）打包Vue3项目

田田川
2,841 阅读1分钟

安装pnpm

pnpm 是最新的，最快的node包管理工具，推荐大家使用。 这里是官方安装地址： www.pnpm.cn/installatio…

大家可以找到适合自己设备方法安装。

搭建第一个 Vite 项目#

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:pnpm

pnpm create vite my-vue-app -- --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

开发环境vite打包

  1. 我们先进入项目地址，在项目根目录打开命令行

  2. 安装项目依赖：

    $ pnpm i

    这是我安装成功后的输出：

    image.png

  3. 输入命令，进入开发环境:

    $ pnpm run dev

    这是我成功后的输出： image.png 浏览器打开：http://localhost:3000/

    image.png

我们曾在vite（一）前端打包工具发展史说过：

  • 开发时，vite不打包，充分利用浏览器的 module 能力。
  • 发布时，vite用 Rollup 打包

那么问题来了：vite如何利用浏览器的module能力？ 我们看项目中的~/index.html,(~ 表示根目录）

<!DOCTYPE html>
<html lang="en">
 ···
    <script type="module" src="/src/main.js"></script>
 ···
</html>

script标签有个属性type="mudule"。这句话就告诉浏览器需要自己去请求的/src/main.js。这就是vite利用浏览器的module能力的方法。

但是问题又来了：浏览器如何知道/src/main.js的绝对路径？ 让我们打开浏览器后台，刷新再查看请求的main.js文件：

image.png

我们再对比看原始main.js文件：

image.png

对比我们就能发现差异了： 文件引用路径被修改了！

实际上，我们的项目在3000端口启动， 那么vite对3000端口的请求进行监听，并且修改相应的路径。

对vue3用vite进行生产环境下的打包

在项目根目录打开命令行窗口，输入命令，进入开发环境:

$ pnpm build

这是我的成功输出：

image.png

继续输入命令预览刚刚的打包成果：

image.png 点击打开上图的地址，同时打开后台并且刷新：

image.png

对比开发模式，发现生产模式请求的文件少很多！，这就是vite设计思路：开发模式不打包，生产模式Rollup打包

avatar
文章
阅读
粉丝