vite打包相关+本地http-server运行打包dist文件进行检测

一.去到vite.config.ts文件

1.添加内容

2.解释

3.打包

二.本地开启http-server服务

1.全局安装http-server

1.1可以通过如下命令查看是否安装http-server

1.2使用如下命令安装

2.进入项目启动服务

3.查看效果

一.去到vite.config.ts文件

1.添加内容

build: {outDir: 'dist',sourcemap: false,chunkSizeWarningLimit: 1500,rollupOptions: {output: {entryFileNames: `assets/[name].${new Date().getTime()}.js`,chunkFileNames: `assets/[name].${new Date().getTime()}.js`,assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,compact: true,manualChunks: {vue: ['vue', 'vue-router', 'pinia'],},},},},

2.解释


1. **`outDir: 'dist'`：** 
指定构建后的输出目录为 'dist'，即所有构建产物将会输出到这个目录。2. **`sourcemap: false`：** 
禁用 sourcemap，这样构建后的代码将不生成对应的 sourcemap 文件。Sourcemap 通常在调试时用于将压缩后的代码映射回原始代码。3. **`chunkSizeWarningLimit: 1500`：** 
设置在打包时控制台输出的警告信息的阈值，当某个文件大小超过 1500 KB 时，会有警告信息提示。4. **`rollupOptions`：** 
这是 Vite 内部使用 Rollup 进行构建，`rollupOptions` 用于配置 Rollup 的选项。- **`output`：** 配置输出选项。- **`entryFileNames: 'assets/[name].${new Date().getTime()}.js'`：**指定输出的入口文件名，包含时间戳以确保文件名的唯一性。- **`chunkFileNames: 'assets/[name].${new Date().getTime()}.js'`：** 指定输出的分片文件名，同样包含时间戳。- **`assetFileNames: 'assets/[name].${new Date().getTime()}.[ext]'`：** 指定输出的资源文件名，也包含时间戳。- **`compact: true`：** 启用紧凑输出，即输出的代码会尽可能地被压缩。- **`manualChunks: { vue: ['vue', 'vue-router', 'pinia'] }`：** 手动指定代码分块（chunks）。在这里，将 'vue'、'vue-router' 和 'pinia' 
这三个库手动分块，以便更好地利用浏览器的缓存机制。这个配置文件的目的是优化构建产物，通过对代码进行压缩、分块等处理，提高项目的性能和加载速度。
同时，通过在文件名中添加时间戳，确保每次构建产生的文件名都是唯一的，防止缓存问题。

打包期间如果有TS的一些报错，自行搜索解决，毕竟这玩意一不小心就会检测到违规处