美文网首页
VUE vue-cli3配置打包后的文件加上版本号

VUE vue-cli3配置打包后的文件加上版本号

作者: world_7735 | 来源:发表于2021-04-09 09:57 被阅读0次

    为了实现项目上传后不存在缓存问题,需要在webpack中加上配置信息
    在项目根目录中添加vue.config.js文件

    const Timestamp = new Date().getTime();
    module.exports = {
        // webpack配置
        chainWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
                // 给js和css配置版本号
                config.output.filename('js/[name].' + Timestamp + '.js').end();
                config.output.chunkFilename('js/[name].' + Timestamp + '.js').end();
                config.plugin('extract-css').tap(args => [{
                    filename: `css/[name].${Timestamp}.css`,
                    chunkFilename: `css/[name].${Timestamp}.css`
                }])
            }
        },
        css: {
            loaderOptions: {
                sass: {
                    // 向全局sass样式传入共享的全局变量
                    data: `@import "@/styles/public.scss";@import "@/styles/element_ui_style.scss";`
                }
            }
        },
        lintOnSave: false,
        productionSourceMap: true,
    
        //是开发模式的时候,获取当前路径下的地址,是测试或者开发模式的时候,用/获取地址
        publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    }
    
    

    或者

    // vue.config.js
    const Timestamp = new Date().getTime();
    module.exports = {
      configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
          filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
          chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
      },
    ...
    }
    

    js、css加版本号参考:https://blog.csdn.net/superKM/article/details/102471167?biz_id=102

    相关文章

      网友评论

          本文标题:VUE vue-cli3配置打包后的文件加上版本号

          本文链接:https://www.haomeiwen.com/subject/xqfizktx.html