返回

SPA 模式下网页版本的检查方案

前端







在 SPA 模式下，我们经常需要检查网页的版本。这可以帮助我们确保用户在访问网站时使用的是最新版本。有很多方法可以检查网页版本，这里介绍一种使用 Webpack 的方法。

### 解决思路

1. 在 vue.config.js 中添加版本号

```javascript
module.exports = {
  publicPath: '/',
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
        filename: 'index.html',
        inject: true,
        version: '1.0.0',
      }),
    ],
  },
};
  1. 使用 html-webpack-plugin 插件将版本号插入到 index.html 的 mate 标签中
<html>
  <head>
    <meta name="version" content="<%= htmlWebpackPlugin.options.version %>">
  </head>
  <body>
    ...
  </body>
</html>
  1. 在 webpack 编译完成后将版本号插入到 html 中
const fs = require('fs');
const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      inject: true,
    }),
  ],
};

const compiler = webpack(config);

compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }

  const outputPath = path.resolve(__dirname, 'dist');
  const htmlFile = path.resolve(outputPath, 'index.html');
  const html = fs.readFileSync(htmlFile, 'utf-8');

  const version = stats.compilation.options.plugins[0].options.version;

  const newHtml = html.replace(/<meta name="version" content=".*?" \/>/, `<meta name="version" content="${version}" \/>`);

  fs.writeFileSync(htmlFile, newHtml);
});

这种方法可以帮助我们轻松地检查 SPA 模式下网页的版本。希望对您有所帮助。