vue3+ts+vite 打包的时候提示【vite (!) Some chunks are larger than 500 kBs after minification.】

2 篇文章 0 订阅
1 篇文章 0 订阅

vue3+ts+vite 打包的时候提示【vite (!) Some chunks are larger than 500 kBs after minification.】

参考链接:【Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification

在vite.config.ts文件中设置如下:

// 扩大块限制
  build: {
      sourcemap: false,
      minify: 'terser',
      chunkSizeWarningLimit: 1500,
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .toString();
            }
          },
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId
              ? chunkInfo.facadeModuleId.split('/')
              : [];
            const fileName =
              facadeModuleId[facadeModuleId.length - 2] || '[name]';
            return `js/${fileName}/[name].[hash].js`;
          }
        }
      }
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue 3 + TypeScript + Vite项目的打包配置,你可以按照以下步骤进行设置: 1. 安装依赖:在项目根目录下运行以下命令安装所需的依赖项: ``` npm install --save-dev vite @vitejs/plugin-vue@next typescript vue-tsc ``` 2. 创建`tsconfig.json`文件:在项目根目录下创建`tsconfig.json`文件,并添加以下内容: ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "importHelpers": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "experimentalDecorators": true, "skipLibCheck": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ``` 3. 配置`vite.config.ts`文件:在项目根目录下创建`vite.config.ts`文件,并添加以下内容: ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], }); ``` 4. 修改`package.json`文件:将`scripts`字段中的`"dev"`和`"build"`命令修改为以下内容: ```json { "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build" } } ``` 这里我们使用`vue-tsc --noEmit`命令来进行类型检查,然后再执行`vite build`命令进行打包。 现在,你可以运行`npm run dev`启动开发服务器,或者运行`npm run build`进行项目打包。希望这些步骤能够帮助到你!如果你还有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值