场景：前端vue3网站项目使用wepack打包后进行部署，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。

现在需要一个解决方案保证每次重新打包部署后，用户浏览器访问网站重新加载js和css，但是未更新还是继续使用缓存加快加载速度。

1、配置nginx不缓存index.html

index.html文件很小，不缓存的话也不会造成很大影响

<code>server {

listen 80;

server_name yourdomain.com;

location / {

try_files $uri $uri/ /index.html;

root /yourdir/;

index index.html index.htm;

//对html htm文件设置永远不缓存

if ($request_filename ~* .*\.(?:htm|html)$) {

add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy- revalidate";

}

}

}

2、配置vue.config.js项目webpack为js和css文件增加引用版本号

打包后index.html中引用js和css文件都会带上 ?v=时间戳 

这样js和css更新后因为时间戳不一样，会重新加载文件

const timestamp = new Date().getTime()

module.exports = defineConfig({

css: {

extract: {

// 修改输出css目录名及文件名

filename: `css/[name].css?v=${timestamp}`,

chunkFilename: `css/[name].css?v=${timestamp}`,

}

},

configureWebpack: {

output: {

// 修改输出js目录名及文件名

filename: `js/[name].js?v=${timestamp}`,

chunkFilename: `js/[name].js?v=${timestamp}`,

},

},

})

3、如果是vite.config.js

那么需要在defineConfig下加上配置

build: {

// outDir: "admin", //想要把dist修改成什么名字在这边改

// 自定义底层的 Rollup 打包配置（Rollup文档地址：https://cn.rollupjs.org/configuration-options/）

rollupOptions: {

// 输出配置

output: {

// 输出的文件自定义命名

chunkFileNames: `js/[name]-[hash].${timestamp}.js`,

entryFileNames: `js/[name]-[hash].${timestamp}.js`,

assetFileNamesL: `[ext]/[name]-[hash].${timestamp}.[text]`,

}

},

},