缓存

.env.production

@@ -22,4 +22,6 @@ VUE_APP_SSO_LOGIN_W = 'http://180.108.205.123:8090/sso-server/oauth2/sso?aid=178
 VUE_APP_SSO_LOGOUT_W ='http://180.108.205.123:8090/sso-server/oauth2/logout?aid=17847210&cbu=http%3A%2F%2F180.108.205.123%3A13001%2F'
 
 # 路由懒加载
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ruoyi",
-  "version": "3.8.6",
+  "name": "suzhouyingjipc",
+  "version": "1.0.1",
   "description": "苏州市应急执法计划管理系统",
   "author": "若依",
   "license": "MIT",

src/main.js

@@ -98,7 +98,22 @@ DictData.install();
 moment.locale("zh-cn");
 Vue.prototype.$moment = moment;
 
-
+// vue每次版本更新强刷页面
+const version = require('../package.json').version
+const versionStorage = localStorage.getItem('version')
+console.warn('最新版本', 'v' + version)
+console.warn('缓存版本', 'v' + versionStorage)
+
+if (version != versionStorage) {
+  localStorage.clear()
+  localStorage.setItem('version', version)
+  console.warn('版本不一致，清除缓存中')
+  //location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，
+  //当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。
+  setTimeout(() => {
+    window.location.reload(true)
+  }, 1000)
+}
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

vue.config.js

@@ -17,6 +17,9 @@ const postcss = px2rem({
   // 基准大小 baseSize，需要和rem.js中相同
   remUnit: 14,
 });
+// 创建hash
+const hash =
+  "v" + require("./package.json").version + "." + new Date().getTime();
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@@ -69,6 +72,12 @@ module.exports = {
         plugins: [postcss],
       },
     },
+    // 给css文件添加hash
+    extract: {
+      // 打包后css文件名称添加时间戳
+      filename: `css/[name].${hash}.css`,
+      chunkFilename: `css/[name].${hash}.css?hash=${hash}`,
+    },
   },
   configureWebpack: {
     name: name,
@@ -87,6 +96,10 @@ module.exports = {
         minRatio: 0.8, // 压缩率小于1才会压缩
       }),
     ],
+    output: {
+      filename: `js/[name].${hash}.js`,
+      chunkFilename: `js/[name].${hash}.js?hash=${hash}`,
+    },
   },
   chainWebpack(config) {
     config.plugins.delete("preload"); // TODO: need test
@@ -105,6 +118,24 @@ module.exports = {
         symbolId: "icon-[name]",
       })
       .end();
+    // 给图片的文件名添加hash
+    config.module
+      .rule("images")
+      .use("url-loader")
+      .tap((options) => {
+        return {
+          //4kb以下图片会被编译成base64 嵌入到css中（可以减少资源请求数量）
+          //4kb以上url-loader表现行为等同于file-loader，会走文件资源请求
+          limit: 4096,
+          // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+          fallback: {
+            loader: "file-loader",
+            options: {
+              name: `img/[name].${hash}.[ext]`,
+            },
+          },
+        };
+      });
 
     config.when(process.env.NODE_ENV !== "development", (config) => {
       config