Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

The problem background

After each front-end release goes online, some users open the corresponding system page blank, and each time they need to clear the cache and open the page again, which brings great bad experience to users

Cause analysis,

Because the browser of the mobile client caches index.html (which contains all static files (JS, CSS, images), every time the user opens the page, 304 will be redirected to the cached index.html (cache also has advantages, can avoid the problem of slow opening each time). Every time a front-end release is released, all static resources (JS, CSS, images) are completely replaced, and index.html is updated with the latest static file references. At this time, when users open the system page, due to the 304 redirection, static files (JS, CSS, pictures) cannot be found, resulting in a blank page.

The solution

Specific principle: front-end system project code increases each packaging according to the rules generated by differentindex.htmlFunction of file names (This feature only applies to the online environment, so adding a feature requires adding an environment judgment), and after the upload server is successful, the operation and maintenance personnel need to modify the ng configuration, the static resources of the proxyindex.htmlChange the name to the name of the newly packaged file. There must be unity.

.html file name rule

Year + month + day + ’01 ‘(the first version is 01, if the second version is 02)’ + ‘.html’ For example (2021101901.html)

Front-end system project code

Vue 2. X version
  1. The first step
// Open config/index.js and add the getIndex property to the build object
// The code is as follows
module.exports = {
    dev: {... }build: {
        getIndex: () = > {
            // Determine the environment, if it is online
            if (process.env.NODE_ENV === 'production') {
                let date = new Date(a)let fullYear = date.getFullYear()
                let month = date.getMonth() + 1
                let cDate = date.getDate()
                month = month < 10 ? ('0' + month) : month
                cDate = cDate < 10 ? ('0' + cDate) : cDate
                let strIndex = fullYear + ' ' + ' '+ month + ' ' + cDate + '01' // The suffix '01' or '02' should be changed for each online version
                return path.resolve(__dirname, `.. /dist/${strIndex}.html`)}else {
                return path.resolve(__dirname, `.. /dist/index.html`)}},... }}Copy the code
  1. The second step
// Open webpack.prod.conf.js in the build file, find the new HtmlWebpackPlugin() method, and modify the filename property
// The code is as follows
plugins: [
    new HtmlWebpackPlugin({
        filename: config.build.getIndex(), // Call the newly added config.build.getIndex method. }),... ]Copy the code

If the version is Vue2. X, the above modification method can be used. Remember to manually change the current version number 0102, 03…

Vue 3. X version

It only takes one step

// Open vue.config.js and add configureWebpack.plugins
// The code is as follows
// Install the html-webpack-plugin

cnpm install -D html-webpack-plugin@4.5. 0

// Define the getIndex method
var HtmlWebpackPlugin  = require('html-webpack-plugin')
const getIndex = () = > {
  // Determine the environment, if it is online
  if (process.env.NODE_ENV === 'production') {
    let date = new Date(a)let fullYear = date.getFullYear()
    let month = date.getMonth() + 1
    let cDate = date.getDate()
    month = month < 10 ? ('0' + month) : month
    cDate = cDate < 10 ? ('0' + cDate) : cDate
    let strIndex = fullYear + ' ' + ' '+ month + ' ' + cDate + '01' // The suffix '01' or '02' should be changed for each online version
    return `${strIndex}.html`
  } else {
    return 'index.html'}}module.exports = {
  // Change the file name of the packaged JS file
  configureWebpack: { / / webpack configuration
    // Change the file name of the packaged index.html file
    plugins: [
      new HtmlWebpackPlugin({
        filename: getIndex(),
        template: 'public/index.html'}})],... }Copy the code

For Vue3. X, the above modification method is ok. Remember to manually change the current version number 0102, 03…

Transportation maintenance change ng configuration

  1. The first step

Find the ng profile corresponding to the front-end project access domain name, for example, the domain name of the dalma-president version is: xxx.com, the static path of the project is: /aaa/, and find the corresponding ng profile: aaa.ng.config.

  1. The second step

Change the file name of the proxy static file with the following code:

Server: {location /aaa/ {index dynamic name.html}}Copy the code

Rules for dynamic names: year + month + day + ’01 ‘(the first version is 01, if the second version is 02)’ + ‘.html’. For example, (2021101901.html) or send a version email to provide the corresponding file name

  1. Step 3: Restart the NG configuration