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

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+鼠标左键 点击如图链接访问项目

最后如图