1. 启动服务器运行打包文件
在服务器中运行的文件，是使用打包后的文件。使用yarn build生产dist目录。
在dist下启动live-server，这是相对于整个文件作为根目录，不是以dist作为根目录。
在本地运行直接可以看到，是以项目根目录为基准。
以根目录如下图所示：
以dist为目录如下图所示：
2. Vite在生产环境对静态资源的处理
当我们将工程进行打包以后, 会发现找不到原来的资源。
- 打包后的静态资源为什么要有hash?
- 浏览器是有一个缓存机制 静态资源名字只要不改, 那么他就会直接用缓存的。
- 刷新页面: 请求的名字是不是同一个读取缓存，所以我们要尽量去避免名字一致
- hash算法: 将一串字符串经过运算得到一个新的乱码字符串 全世界独一无二(uuid才是独一无二的 )
利用好hash算法 可以让我们更好的去控制浏览器的缓存机制
修改svg，生成的hash不同
在vite.config.js中配置：
build: {
rollupOptions: { // 配置rollup的一些构建策略
output: { // 控制输出
// 在rollup里面, hash代表将你的文件名和文件内容进行组合计算得来的结果
assetFileNames: "[hash].[name].[ext]"
}
},
assetsInlineLimit: 4096000, // 4000kb 超过会以base64字符串显示
outDir: "dist", // 输出名称
assetsDir: "static" // 静态资源目录
},
配置前后
总结
在前端开发中，项目从开发到部署涉及多个关键步骤，其中包括使用构建工具（如Vite）对项目进行打包，以及将打包后的文件部署到服务器上。打包过程通过压缩、合并和优化代码，减少了生产环境中资源的加载时间和请求次数。特别是，Vite通过其高效的构建策略和配置选项，能够进一步优化静态资源的管理，包括利用Hash值来避免浏览器缓存旧文件的问题。
在配置Vite时，开发者可以调整各种选项，如rollupOptions.output.assetFileNames来定制静态资源的文件名格式，assetsInlineLimit来设置内联资源的阈值，以及outDir和assetsDir来指定输出目录和静态资源目录。这些配置不仅有助于优化生产环境的性能，还提高了项目的可维护性和可扩展性。
