vue 打包的方式

本文介绍了Vue项目的两种打包方式:通过vue-cli脚手架和手动使用webpack。详细讲解了vue.config.js的配置,以及webpack的assetsPublicPath修改。在打包过程中,提到了如何指定打包目录和文件名,以及在项目更新后如何重新打包。同时,文章以程序员加班场景为背景,增添了一丝趣味性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我是一个苦b的程序员,今晚加班到快通宵了,困得快睁不开眼了,女上司很关心,问我要不要吃宵夜。我没好气地说,宵夜就算了,能让我睡一觉就行了。女上司红着脸说了句讨厌啊,然后坐在我身边不动,好像距离我很近,搞得我很紧张,难道她发现我的程序出了bug?

        今天分享的是vue项目中的打包方式:

        一、使用vue-cli脚手架生成的项目

        二、使用webpack

        那么就让我们步入正题

        第一种:

                vue create app生成项目的目录:

        我们可以看到使用脚手架生成的项目是没有config文件夹的,那么就需要我们在根目录下创建一个vue.config.js的文件 而且文件的名称一定要是vue.config.js

         创建好文件之后在文件里添加一下代码:

        第二种:

                使用webpack

                创建好项目之后我们可以看到会有一个config的文件夹

                直接修改assetsPublicPath字段

         配置完后之后就开始我们的打包环节

        打开项目根目录的package.json的文件夹 script脚本的build字段

        现在执行npm run build 会把src下的所有代码一块打包

        那我想指定目录打包怎么办?

                这边简单介绍几个打包的配置项

        --target lib 指定打包目录

        --name 打包后的文件名字

        --dest 打包后的文件夹名称 

         接下来执行npm run build 生成我们打包后的文件,然后部署上线 但是需要注意的一点是只要我们的项目做了修改,都需要重新执行npm run build重新打包 

        深夜我坐在电脑前一边喝水一边苦苦检查bug。一番研墨拟纸,并点上上好檀香。定神片刻,泼墨挥毫,郑重地写下一行字:hello world!

### Vue3 打包工具 Vite 与 Webpack 的对比分析 #### 性能表现 Vite 利用了现代浏览器对 ES Modules (ESM) 的原生支持,因此在开发环境中能够提供极快的冷启动速度和热更新性能[^2]。相比之下,Webpack 需要在每次更改时重新构建整个模块图,这可能导致较慢的反馈循环,尤其是在大型项目中。 #### 开发体验 Vite 提供了一种基于 ESM 的按需加载机制,使得开发者无需等待长时间的初始编译即可快速预览应用效果。而 Webpack 虽然也提供了 HMR(Hot Module Replacement),但在处理复杂依赖关系时可能会显得稍逊一筹[^1]。 #### 生态系统与插件支持 Webpack 拥有更加成熟和丰富的插件生态系统,几乎可以满足任何类型的前端需求。然而,对于专注于 JavaScript 库或小型项目的场景来说,Rollup 及其衍生产品 Vite 更加轻量级,并且通过精心设计的插件接口实现了良好的扩展性。此外,由于 Vite 设计之初就考虑到了 Rollup 插件系统的兼容性,许多现有的 Rollup 插件可以直接用于 Vite 中。 #### 构建产物优化 两者都能很好地执行 Tree-Shaking 来移除未使用的代码部分以减少最终文件大小。值得注意的是,尽管 Rollup/ Vite 在这方面具有天然优势,但随着技术进步,最新版本的 Webpack 同样在这方面表现出色。 #### 学习曲线 如果团队成员已经熟悉 Webpack,则继续沿用可能更为便捷;而对于新项目或者希望尝试新技术栈的情况下,采用 Vite 将会是一个不错的选择,因为它简化了许多配置细节并降低了入门门槛[^3]。 ```javascript // 示例:简单的 Vite 配置文件 import { defineConfig } from 'vite'; export default defineConfig({ plugins: [], }); ``` 综上所述,在选择适合 Vue3 项目的打包工具时应综合考量具体应用场景的需求——如果你追求极致的速度以及现代化开发流程带来的便利,那么 Vite 或许是更好的选项;但如果当前环境高度依赖于某些特定功能强大的 Webpack 插件,则保留后者可能是明智之举。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值