解决vue3+ts打包，ts类型检查报错导致打包失败，goview打包报错options

已于 2023-12-21 12:00:22 修改
阅读量2.1k 收藏 10
点赞数 11
分类专栏： 报错 文章标签： vue.js javascript
于 2023-12-16 11:09:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43807473/article/details/135030093
版权
本文讲述了在使用goview进行开源大屏项目时，遇到的TypeScript类型检查导致打包失败的问题，通过临时禁用类型检查并提供生产模式打包命令解决。同时，还提到了可能遇到的js内存溢出问题及其解决方法。
摘要由CSDN通过智能技术生成

最近拉的开源大屏项目goview，在打包的过程中一直报Ts类型报错导致打包失败，项目的打包命令为：

"build": "vue-tsc --noEmit && vite build"

是因为 vue-tsc --noEmit 是 TypeScript 编译器（tsc）的命令，vite build 则是使用 Vite 进行最终的构建。所以会检测ts的类型是否写的正确标准，如果项目中类型错误少的话可以一一解决并打包但是goview的TS类型错误的地方实在太多了，所以直接不检测类型来进行打包。

在 package.json的"scripts"中添加

"build:pro": "vite build --mode production"

然后使用 npm run build:pro 进行打包就没问题了。 

如果你也使用的是goview做大屏项目，那么解决完这个问题之后还有可能遇到打包的时候 js占内存溢出导致打包失败的问题，可以看一下这个文章，扩一下node.js内存就没问题了

解决js栈内存溢出导致打包报错的问题

喜陈
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
解决vue3+Ts项目，打包报错问题。
A15029296293的博客
05-29 986
可以看到以上报错，很多基本上都是ts的写法问题，有的同事写ts可能不会在意这些问题，例如写了index却没有使用，导入了某个模块却没有使用，再或者定义的变量没有加类型，再打包的时候都会出现问题，那么临时去改肯定来不及，我们可以在package.json中去处理打包命令。可以看到build命令里面有两个命令。vue-tsc和vite build；vue-tsc是TypeScript的编译命令，而vite build是vite的打包编译命令，如何想要打包成功不报错的情况下，需要将vue-tsc命令删掉即可。
vue3-ts-error：vue 3 ts错误重现
02-28
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 请在Windows操作系统中运行此示例
vue-tsc --noEmit导致打包报TS类型错误
最新发布
Teresa的前端海底乐园
06-26 413
vue-tsc：Vue 官方提供的命令，用于执行 TS 的类型检查。–noEmit：TS 编译器的选项，使用 --noEmit 选项后，编译器仅执行类型检查，而不会生成任何实际的编译输出。所以可以看出了，在打包的时候编译器执行了TS类型检查，所以才报了一堆错，但类型错误最终不会影响项目的正常运行。可以发现在build时，执行了vue-tsc --noEmit && vite build，其中。设置后编译器不会检查库文件中的类型定义是否正确，也不会对库文件的使用进行类型检查。再次打包就非常顺利～
vite vue3打包时出现TS类型错误解决最快速解决方案
hey_lie的博客
11-02 3156
packge.json中将build的vue-tsc命令删除。
ts打包错误 
lx233
02-09 992
declare module '@/util/gio.js' // declare module 'xxx'路径或者模块名。提示信息为：无法找到模块“xxx.js”的声明文件 xxx隐式拥有 “any” 类型。// 1. 自行声明：declare const require: any。然后就可以正常引入了。
vue3使用Vite打包是Ts检查报错问题
MingT 明天你好！的博客
08-02 2493
'calendarSwitch' is declared but its value is never read error TS： Cannot find module 'element-plus/es/locale/index.js' or its corresponding type declarations. ; }' is not assignable to parameter of type 'never'.
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+vite+router+vuex+api请求封装
12-29
在Vue3项目中，TS提供了更好的类型检查和代码提示，使得大型项目的协作变得更加顺畅。 3. Vite：由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生特性，实现了快速的热更新和开发服务器启动，极大地...
datav Vue3+TS+Vite版.zip
04-02
标题 "datav Vue3+TS+Vite版.zip" 暗示了这是一个基于Vue3、TypeScript（TS）和Vite构建的数据可视化项目。这个压缩包可能包含了用于开发数据展示应用的所有源代码和配置文件。让我们深入了解一下这些技术及其在项目...
vue3+ts入门（todolist案例）
02-10
Vue3 是 Vue.js 框架的最新版本，它带来了许多改进和新特性，而 TypeScript 是一种静态类型的语言，它可以为 JavaScript 添加类型检查，提高代码的可维护性和稳定性。在这个"vue3+ts入门（todolist案例）"中，我们将...
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vue项目打包发布出现的报错
呆子小木心的博客
06-23 6767
vue项目打包发布出现的报错
vue3+ts项目 写js文件报错
wentingya的博客
04-11 723
然后在tsconfig.json里配置了跳过对js文件的检查。如上图，vue3+ts项目中创建了js文件就报错。很疑惑，两个json文件不是应该相互合并吗？然后重新运行还是报错，检查后找到了原因。去掉这句就不报错了。
vue3+ts+vite打包后dayjs报错问题
m0_37622071的博客
02-22 1002
vue3+ts+vite打包后dayjs报错问题
在以创建的VUE3项目中引入TS 及报错处理
weixin_52901482的博客
07-19 1578
vue : 无法加载文件 C:\Users\22380\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlin k/?语句指令：npm install --save-dev @vue/cli-service。找到index.html 看引入的main.js是否改为main.ts。1.打开Windows PowerShell。根据提示安装vue/cli-service。如果项目启动成功页面报错。
react+next.js打包 因Eslint限制 报错，导致打包不成功
蓝胖子的博客
03-13 510
react+next.js打包 因Eslint限制 报错，导致打包不成功
vue-cli3 中停tslint
weixin_42084225的博客
11-07 1521
一、不检测个别语句 在不检测的语句上加 // @ts-ignore // @ts-ignore 二、停掉tslint 在tslint.json中设置： // tslint.json { "defaultSeverity": "none" } 在vue.config.js中加如下配置 module.exports = { lintOnSave: false // 关闭代码验证...
vue vconsole build打包时报错: vconsole.min.d.ts
web前端学习总结
11-30 1441
vue 中用到 vconsole时， build打包时报错 in vconsole.min.d.ts 参考： issues vConsole 报错如下： Import or export declaration in an ambient module declaration cannot reference module through relative module name 将 vconsole 的版本切回3.9.1版本就没问题了 ...
vue3+ts+vite PurgeCSS 打包失败
06-02
在Vue 3 + TypeScript + Vite项目中使用PurgeCSS进行打包时，可能会遇到打包失败的问题。这通常是由于PurgeCSS与TypeScript的类型检查器发生冲突导致的。 要解决这个问题，可以尝试在Vite的配置文件中添加一个插件，用于在TypeScript类型检查完成后再运行PurgeCSS。以下是一个示例配置： ```javascript // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import PurgeIcons from 'vite-plugin-purge-icons'; import PurgeCSS from '@fullhuman/postcss-purgecss'; import autoprefixer from 'autoprefixer'; import postcssImport from 'postcss-import'; export default defineConfig({ plugins: [ vue(), PurgeIcons(), { name: 'postcss', apply: 'build', async transform(code, id) { if (!/\.vue\?/.test(id)) { return; } const postcssPlugins = [ postcssImport(), autoprefixer(), ]; if (this.isProduction) { postcssPlugins.push(PurgeCSS({ content: [id], safelist: [ 'html', 'body', ], })); } const { css } = await require('postcss')(postcssPlugins).process(code, { from: id }); return { code: css, }; }, }, ], }); ``` 在这个配置中，我们使用Vite的插件系统来运行PostCSS。在PostCSS中，我们使用了PurgeCSS来清除未使用的CSS，但是只在生产环境中使用。在Vite的配置中，我们使用了一个名为`postcss`的自定义插件，并在`apply`选项中指定了它只在打包时运行。 在这个自定义插件中，我们首先检查文件是否为Vue文件，如果不是，直接返回。接下来，我们定义了PostCSS的插件列表，包括`postcss-import`和`autoprefixer`。如果在生产环境中，我们还会添加一个`@fullhuman/postcss-purgecss`插件来清除未使用的CSS。 最后，我们使用动态`require`语句来运行PostCSS，并返回处理后的CSS。这样，我们就可以在TypeScript类型检查完成后再运行PurgeCSS，避免了它们之间的冲突。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值