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

最新推荐文章于 2024-05-22 13:52:22 发布

程序猿online

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量1.3k

点赞数 40

分类专栏：前端代码应用实例 vite创建vue3 TS项目实例文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/xhc6666/article/details/135627667

版权

vite创建vue3 TS项目实例同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

前端代码应用实例

7 篇文章 0 订阅

订阅专栏

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的一些报错，自行搜索解决，毕竟这玩意一不小心就会检测到违规处