vue 部署上线清除浏览器缓存的方式_vue.js_

server { listen 80; server_name yourdomain.com; location / { try_files $uri $uri/ /index.html; root /yourdir/; index index.html index.htm; if ($request_filename ~* .*\.(?:htm|html)$) { add_header Cache-Control "no-cache, no-store"; //对html文件设置永远不缓存 } } } 

//定义一个变量获取当前时间戳 const version = new Date().getTime(); //output模块将时间戳加入到输出的文件名里 output: { publicPath: '/', path: config.build.assetsRoot, filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`), chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${version}.js`) }, //css文件名加时间戳 new ExtractTextPlugin({ filename: utils.assetsPath(`css/[name].[contenthash].${version}.css`), allChunks: true, }), 

const version = new Date().getTime(); module.exports = { outputDir: 'dist', //打包的时候生成的一个文件名 lintOnSave: false, productionSourceMap: false, css: { loaderOptions: { sass: { data: `@import "@/components/themes/_handle.scss";` } }, // 是否使用css分离插件 ExtractTextPlugin extract: { // 修改打包后css文件名 // css打包文件，添加时间戳 filename: `css/[name].${version}.css`, chunkFilename: `css/[name].${version}.css` } }, configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `js/[name].[chunkhash].${version}.js`, chunkFilename: `js/[id].[chunkhash].${version}.js` } } } 

const timeUpdate  = new Date().getTime(); module.exports = {   // 解决发布生产以后有缓存的问题   // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】   //一般情况下，该方法就能解决。   configureWebpack: {     output: {       filename: `[name].js?v=${timeUpdate}`,       chunkFilename: `[name].js?v=${timeUpdate}`     },   },   // 修改打包后css文件名   css: {     loaderOptions: {       sass: {         data: `@import "@/components/themes/_handle.scss";`       }     },     // 是否使用css分离插件 ExtractTextPlugin     extract: {       filename: `static/css/[name].${timeUpdate}.css`,       chunkFilename: `static/css/[name].${timeUpdate}.css`     }   },   // webpack-chain (链式操作)这个库提供了一个 webpack 原始配置的上层抽象，   // 使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。   // 它允许我们更细的控制其内部配置。   chainWebpack(config) {         // img的文件名修改         config.module           .rule('images')           .use('url-loader')           .tap(options => {             options.name = `static/img/[name].${timeUpdate}.[ext]`             options.fallback = {               loader: 'file-loader',               options: {                 name: `static/img/[name].${timeUpdate}.[ext]`               }             }             return options           })     }, };