在使用vue编写前端代码时，默认生成的文件名，会导致更新到服务器后，浏览器本地缓存。为了解决这个问题，通常情况，是给打包的文件添加时间戳或者版本号来使客户端强制拉取最新的文件。

在开发中，一般是修改webpack配置来达到这个目的。

项目地址

https://github.com/minms/quasar-app-version-inject

该项目为quasar v2框架的一个插件，安装后会自动为项目修改webpack配置，并且添加一个process.env.APP_VERSION常量。安装后不需要作任何配置

以下为核心逻辑

const ver = build_version();
const ver_char = ver.replaceAll('.', '')

api.extendWebpack((cfg, {isClient, isServer}, api) => {
    cfg.output = Object.assign({}, cfg.output, {
        filename: `js/[name].${ver_char}.js`,
        chunkFilename: `js/[name].${ver_char}.js`
    })
})

if (api.hasPackage('mini-css-extract-plugin')) {
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    api.extendWebpack((cfg, {isClient, isServer}, api) => {
        cfg.plugins.forEach((val) => {
            if (val instanceof MiniCssExtractPlugin) {
                val.options.filename = `css/[name].${ver_char}.css`
                val.options.chunkFilename = `css/[name].${ver_char}.css`
            }
        })
    })
}
api.extendQuasarConf((conf, api) => {
    if (!conf.build.env) {
        conf.build['env'] = {}
    }

    conf.build.env['APP_VERSION'] = ver
})

安装方法

quasar ext add app-version-inject