Web前端(12)-vue代码读取package.json中的version

原因

我修改了vue的代码后，重新打包上传到服务器var/www上面，结果发现浏览器根本没有拉最新的网页，还是用的之前的。所以有点疑惑如何让浏览器加载最新的网页，而不是用缓存。

方案

找了一下AIGC，给的建议其中一个是用版本的方案来控制，因为vue的package.json中有一个version，所以可以直接修改，但是如何验证已经是最新的version的网页呢。

就需要网页中能够查看这个版本号。

实施

1、试错

开始AIGC让去直接js代码中读取package.json中的version，用客户端的思想想了一下感觉还可行，运行上去直接报找不到package.json文件，结果发现打包的文件根本就没有了package.json。

 // const response = await axios.get('/config.json');
 // 打包后根本没有这个文件

AIGC还是坑啊。

2、正解

通过环境变量来控制。

在vue.config.js中配置如下：

const webpack = require('webpack');//代码中获取package.json中的version
module.exports = defineConfig({
  configureWebpack: { 
    plugins: [ 
      new webpack.DefinePlugin({ 
        'process.env.VUE_APP_VERSION': JSON.stringify(require('./package.json').version) 
      }) 
    ] 
  } 
})

页面js中直接获取

    const versionNumber = process.env.VUE_APP_VERSION; 
    console.log("version = ", versionNumber);
    version.value = versionNumber;

然后更新代码后就可以更新这个版本号，重新上传到服务器后，刷新网页就能看到当前是不是这个最新版本号，如果是就说明网页已经生效了。