目录
一.去到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的一些报错,自行搜索解决,毕竟这玩意一不小心就会检测到违规处
3.打包
使用命令
npm run build
最后如果成功则是
二.本地开启http-server服务
1.全局安装http-server
1.1可以通过如下命令查看是否安装http-server
打开电脑的控制台,执行命令
http-server --version
如果 http-server
已全局安装,它将显示版本号。如果未安装,系统可能会显示类似 "http-server 不是内部或外部命令,也不是可运行的程序" 的错误信息。
1.2使用如下命令安装
npm install -g http-server
2.进入项目启动服务
进入到dist文件
启动服务
http-server
如图,启动成功
3.查看效果
使用 ctrl+鼠标左键 点击如图链接访问项目
最后如图