If you can’t fix the bug, write an article first.

Let’s start with a few points of knowledge that we need for this project.

The project address: github.com/ht-sauce/vu…

1. Pre-commit: Husky, Lint-staged

Recently vue3 created a new project called package.json with something called pre-commit

Purpose is to:

When a project wants to use Git for code submission, a Git hook called pre-commit will be used. When calling git commit command, some scripts will be automatically executed to detect the code. If the detection error occurs, the commit code will be blocked and the push code will not be possible

Configuration:

  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
Copy the code

2. Browser cache

In addition to caching data, which we normally do, the browser will actually cache data for you. Like a JS file or image, the browser will not fetch it frequently after loading it once. You can use it locally if you have it locally. But it raises a question:

Sometimes we release a new version of a front-end project because of browser caching issues. Cause the page is still the old page this is more troublesome, the customer forced to refresh it. This is especially true when only minor changes are made to the page.

3, first implement a NPM run version, update the version number

Here we need a little bit of NodeJS power. Fs file operation module

I’m just going to put the code in here. Note the changes to the package.json section

// updateVersion.mjs

import * as fs from 'fs/promises'; const versionApi = { read: () => fs.readFile('./public/comjs/version.json'), write: (str) => fs.writeFile('./public/comjs/version.json', str) } const packageApi = { read: () => fs.readFile('./package.json'), write: (str) => fs.writeFile('./package.json', Function updateVersionTool(resData) {resData = json.parse (resdata.toString ()) const versionArr = resData.version.split('.') versionArr[2] = Number(versionArr[2]) + new Date().getTime() resData.version = versionArr.toString().replace(/,/g, Async function updateVersion() {try {// Modify the version number below package.json const packData = await Packageapi.read () const pack = updateVersionTool(packData) const version = pack.version, Const versionJson = await versionapi.read () const versionData = json.parse (versionjson.tostring ()) Versiondata.version = version // Write version file await packageapi.write (json.stringify (pack)) await Versionapi.write (json.stringify (versionData)) console.log(' Latest version: ' + version) } catch (e) { console.log(e) return new Error(e) } } updateVersion()Copy the code

Here I have modified two files, one is the package.json file of itself, and the other is a new version.js file under public. The former problem is not big, the latter is the main character of this version update. The js file update operation is to automatically update each package, no longer need to manually change the version number. This is especially important when our services are generally placed in automated packaged services such as Jekins.

4. Update detection timing

I’ve read a lot of articles before, both when the project is first loaded and when the interface is called. But I want it to be less intrusive and more pluggable. So I took the Mixin approach.

1, first create a glload. js file and implement the logic

Import {ajax} from '@/services/base/axiosAjax' import vuex from '@/store' let isReq = true created() { this.checkVersion() }, methods: { async checkVersion() { try { const res = await this.getVersionJson() const version = res.data? .version if (! version) return null const cacheV = vuex.state.version if (cacheV ! Log (' updated version ', version) window.location.reload(true) vuex.mit ('set_data', {version})} catch (e) {console.log(' version check failed ', e)}}, getVersionJson() {switch (isReq) {case true: { setTimeout(() => { isReq = true }, 1000) isReq = false return ajax({ url: `/comjs/version.json?v=${new Date().getDate()}`, method: 'get' }) } case false: { return {} } } }, }, } export default GlLoadCopy the code

A. Because mixins are global mixins, all components are checked for updates when they are first loaded, but in order to avoid abnormal interface frequency. I did a layer of anti-shake treatment. In this way, the general page is also 1 second to complete the loading bar. And then a successful test within a second.

B, here must be careful to store the version number in the cache, otherwise the page will be infinite refresh. I’m caching vuex by PersistedState.

2, modify in main.js and blend in

Import 'normalize. CSS '// Default CSS Settings import {createApp} from 'vue' import App from './ app.vue' import router from './router' import store from './store' import components from './components' import '@/theme/index.scss' // theme style import // Global Mixin, Import GlLoad from '@/Mixin/GlLoad' const app = createApp(app) app.use(store) app.use(router) components(app) import GlLoad from '@/Mixin/GlLoad' const app = createApp(app) app.use(router) components(app) app.config.globalProperties.$store = store app.config.globalProperties.$router = router app.mixin(GlLoad) app.mount('#app')Copy the code

5. How to update automatically?

Json script: NPM run version && vue-cli-service build: NPM run version && vue-cli-service build

Git precheck section

"gitHooks": {
    "pre-commit": "lint-staged"
  },
Copy the code

Instead of

"gitHooks": {
    "pre-commit": "npm run version && lint-staged"
  },
Copy the code

6. Thanks for reading