关于vue3.0 + vite + ts 打包的坑

最新推荐文章于 2025-03-19 10:37:58 发布
最新推荐文章于 2025-03-19 10:37:58 发布
阅读量1.4w 收藏 18
点赞数 3
分类专栏： vue3.0 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37656005/article/details/119818759
版权

关于vue3.0 + vite + ts 打包的坑
我的项目是用vue3.0.x+ vite2.4.x + ts 4.3.x版本开发的，引入一些elementui,axios,vuex等插件，用npm run build 打包的时候报了一大堆错，后来发现原来是vue-tsc --noEmit && vite build的问题

报错详情：
在这里插入图片描述

package.json文件默认配置如下：

"scripts": {
   
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve"
最低0.47元/天 解锁文章
解决vue3+ts打包，ts类型检查报错导致打包失败，goview打包报错options
南七小僧的学海无涯
02-02 1568
则是使用 Vite 进行最终的构建。所以会检测ts的类型是否写的正确标准，如果项目中类型错误少的话可以一一解决并打包但是goview的TS类型错误的地方实在太多了，所以直接不检测类型来进行打包。如果你也使用的是goview做大屏项目，那么解决完这个问题之后还有可能遇到打包的时候 js占内存溢出导致打包失败的问题，可以看一下这个文章，扩一下node.js内存就没问题了。然后使用 npm run build:pro 进行打包就没问题了。是 TypeScript。的"scripts"中添加。
vue-cli3+electron构建项目打包踩坑记
qq_41538952的博客
09-01 655
构建项目的过程就不说了,网上一大堆,一搜一大把,主要是讲一下在当前环境下使用electron-builder打包的问题； package.json配置如下： 如图,electron/electron-builder/webpack等都是最新盘本,electron打包是有一个默认安装路径的,并且在不加任何配置的情况下,是直接安装在默认路径下的;目前项目需求打包之后让用户能够自己选择安装路径的;解决过程如下： 1.查看electron官方说明：如下 大概的意思是我们需要配置nsis这一关键项,a
vite下使用vite-plugin-obfuscator打包后混淆加密
最新发布
weixin_50651687的博客
03-19 1107
是一个用于 Vite 的插件，它可以将你的 JavaScript 代码进行混淆，以增加代码的安全性，防止他人轻易地阅读或逆向工程你的代码。混淆工具通常会将变量名、函数名等替换为难以理解的字符，同时可能会移除注释和空白字符，使得代码难以阅读和理解。
Vite+vue+element 之Vite打包的坑
different9102的博客
12-02 1010
项目中使用vite打包工具， webpack配置如下： 打包报错： 解决方案： 修改webpack配置如下： 去掉 “vue-tsc --noEmit && ” 再打包，成功
vue-cli3配置多环境打包踩坑记
qq_41538952的博客
06-27 639
相较于vue-cli2来说,vue-cli3更便于开发人员使用,也减少了很多繁琐的配置,相信使用过webpack的朋友都深有体会!
【Vite+Ts】打包使用js混淆加密_vite代码混淆
2301_76328475的博客
04-12 784
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
Vue打包的坑
qq_17613195的博客
09-17 227
1、不同环境接口地址的配置 1.1、配置开发环境 文件路径：config/dev.env.js 增加如下代码： 1.2、配置测试环境 文件路径：config/test.env.js（没有这个文件可以自己新增） 增加如下代码： 1.3、配置生产环境 文件路径：config/prod.env.js 增加如下代码： 1.4、使用接口路径 在需要调用api的地方使用如下：...
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
通过阅读 "说明.txt" 文件，可以获得关于如何安装和运行项目的指导，例如使用 `npm install` 安装依赖，然后运行 `vite dev` 或 `vite build` 进行开发或生产环境的构建。 综上所述，这个项目结合了 Vue3、Vite5、...
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 1511
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
vue 3.0 + vite项目gzip打包优化
m0_67266585的博客
03-03 1538
最近自己构建了一个 vite 2.0 + vue 3.2.* 的开源项目，记录一下本次项目进行本地代码打包压缩的优化 手摸手开始优化 什么是gzip 为什么要去优化 如何优化 1. 前端代码配置 代码压缩 服务器配置 ``Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. St
Vue3.0 + Vite2.0 + Ts4.0搭建一款简约版本的移动端博客
Sujb8540的博客
09-13 615
vue3-vite2-blog-h5 一款简约版本的移动端博客。前端项目主要是采用Vue3最新语法糖<script setup>和Vant3.0来搭建的；采用Tsx来渲染公共组件；采用Vite2.0来构建、打包。后端项目主要采用Node框架Koa2以及MongoDB数据库来设计的。 PC 端博客线上预览地址：http://www.rasblog.com PC 端博客仓库地址：GitHub - Sujb-sus/vue-node-mongodb-blog: vue + node + mong
详解vue静态资源打包中的坑与解决方案
11-28
本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，部署项目至特定路径下：如： //ip:port/public/springActivity/ 此时访问： http://ip:port/public/springActivity/index.html index.html 可以正常访问，但是引用的js，css等文件服务器响应均为404，查看引入的资源路径如下： http://ip:por
vue-tsc
03-03
vue-tsc vue-tsc --noEmit && vite build
vue3+vite+ts项目配置开发环境和生产环境 打包命令配置
热门推荐
码农键盘上的梦
06-20 1万+
开发环境和生产环境的配置和打包方式有所不同，下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。打包完成后会在项目根目录下生成dist目录，里面包含了打包后的静态文件和index.html文件，可以直接部署到服务器上。这里配置了三个命令，分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。1.3 配置.env.development。2.2 配置.env.production。1.2 配置vite.config.ts。2.1 配置vite.config.ts。
基于Vite构建的Vue3+Ts项目打包优化全过程
weixin_51629637的博客
07-14 5270
vite构建的vue3+ts项目，记录打包优化实践全过程。
（06）vite与ts的结合
秋来九月八
04-29 854
表明在打包时，如果有类型出错，不会生成打包文件，不会执行后面的。让 ts 在验证代码时，跳过node_module的文件。在开发中，可能还需要声明更多的类型与vite结合。会被vite引入，并在获取vite的。另外 build 命令中，新增了。
vite+vue3+ts开发项目构建过程
weixin_39838846的博客
07-13 557
vite+ts+vue3环境构建
来自一枚rookie的项目开发——vite下的vue3+ts的项目打包及部署
weixin_45698813的博客
03-25 2095
Vite下Vue3.0+Typescript项目打包 正常的打包操作 npm run build // package.json ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" }, ... 没那么严肃的打包操作 npm run build //package.json ... "scripts": {
vue-tsc --noEmit导致打包报TS类型错误
Teresa的前端海底乐园
06-26 1044
vue-tsc：Vue 官方提供的命令，用于执行 TS 的类型检查。–noEmit：TS 编译器的选项，使用 --noEmit 选项后，编译器仅执行类型检查，而不会生成任何实际的编译输出。所以可以看出了，在打包的时候编译器执行了TS类型检查，所以才报了一堆错，但类型错误最终不会影响项目的正常运行。可以发现在build时，执行了vue-tsc --noEmit && vite build，其中。设置后编译器不会检查库文件中的类型定义是否正确，也不会对库文件的使用进行类型检查。再次打包就非常顺利～
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值