vue3+vite纯前端实现自动触发浏览器刷新更新版本内容，并在打包时生成版本号文件

在现代前端开发中，使用 Vue 3 和 Vite 作为构建工具的组合越来越受欢迎。为了让用户在版本更新时能够自动刷新浏览器，我们可以利用 Vite 的热更新特性，以及在打包时生成一个包含版本号的文件。接下来，我们将详细介绍如何实现这一过程，并提供相应的代码示例。

一、Vue 3 + Vite 项目搭建

首先，我们需要创建一个 Vue 3 + Vite 项目。在终端中输入以下命令：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

二、生成版本号文件

我们希望在每次构建时生成一个包含版本号的文件。我们可以通过修改 vite.config.js 文件来实现这一点。首先，安装 npm-package-version，以便在构建时获取当前版本号。

npm install --save-dev npm-package-version

接着，在项目根目录下创建一个 scripts 目录，然后在 scripts 目录下创建一个叫做 version.js 的文件，内容如下：

const fs = require('fs');
const path = require('path');
const packageJson = require('../package.json');

const version = packageJson.version;

fs.writeFileSync(path.resolve(__dirname, '../src/version.json'), JSON.stringify({ version }), 'utf-8');
console.log(`Version file created with version: ${version}`);

在这个脚本中，我们读取了 package.json 文件中的版本号，并将其写入到 src/version.json 文件中。

三、更新 Vite 配置

接下来，我们需要在 Vite 的构建过程中调用这个脚本。我们可以修改 vite.config.js 文件如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import exec from 'child_process';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'generate-version-file',
      generateBundle() {
        exec.execSync('node scripts/version.js');
      }
    }
  ]
});

在这里，我们使用一个 Vite 插件钩子 generateBundle，在生成文件时会执行 version.js 脚本，生成版本号文件。

四、自动刷新浏览器

为了实现用户在访问页面时自动获取最新的版本信息并刷新页面，我们可以在 Vue 组件中进行如下处理。

在 src/App.vue 中，我们添加代码以检查版本文件并比较版本号。如果有更新，就刷新页面：

<template>
  <div id="app">
    <h1>欢迎使用 Vue 3 + Vite</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentVersion: ''
    };
  },
  async mounted() {
    await this.checkVersion();
    // 每隔一分钟检查一次
    setInterval(this.checkVersion, 60000);
  },
  methods: {
    async checkVersion() {
      try {
        const response = await fetch('./version.json');
        const data = await response.json();

        if (this.currentVersion && this.currentVersion !== data.version) {
          // 如果版本不匹配，刷新页面
          window.location.reload();
        }

        this.currentVersion = data.version;
      } catch (error) {
        console.error('检查版本失败:', error);
      }
    }
  }
}
</script>

五、运行和打包

最后，运行你的项目，使用以下命令启动开发服务器：

npm run dev

当你打包项目时，执行如下命令：

npm run build

此时，src/version.json 文件将会自动生成，包含当前的版本号。

小结

通过以上步骤，我们实现了一个 Vue 3 + Vite 的项目，当有新版本发布时，用户可以自动刷新页面以获取最新内容。此外，通过自定义的构建流程，项目在被打包时会生成一个版本号文件。这样一来，用户体验更加友好，也方便团队管理和调试。希望本文对你有所帮助！