vue3 打包文件名固定 加版本后缀

vue打包之后文件名类型于“chunk-vendors.12492877.js”这样

这种情况下,上线的时候除非把原来的文件都删除掉,否则文件会一直增加,这样会增大存储压力,将文件名固定就不会出现这种问题,将文件命名改为chunk-vendors.js?v=12492877将完美解决。

// const CompressionPlugin = require('compression-webpack-plugin');
const { defineConfig } = require('@vue/cli-service')
const Timestamp = new Date().getTime();

module.exports = defineConfig({
    devServer:{
      port:8080,
      allowedHosts: "all",//跨域
      webSocketServer:false,
      proxy:{//代理
        "/":{
          target:"http://test-xx.cn/ ",
          changeOrigin:true,
          pathRewrite:{
            "^/":"/"
          }
        }
      }
    },
    transpileDependencies: true,
    publicPath: './',
    // 输出文件目录
    assetsDir: 'static',
    outputDir: process.env.outputDir,
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,

    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,

    
    //filenameHashing: false,
  css: {
	    extract: {
            // 修改打包后css文件名
            filename: `static/css/[name].css?v=[contenthash:8]`,
            chunkFilename: `static/css/[name].css?v=[contenthash:8]`,
            ignoreOrder: true,
        }
    },
    configureWebpack: {
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
             // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
             // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
             filename: `static/js/[name].js?v=[contenthash:8]`,         // js打包文件,添加时间戳
             chunkFilename: `static/js/[name].js?v=[contenthash:8]`
        }
   },
    chainWebpack:  config => {
        //if (process.env.NODE_ENV === 'production') {
        // 给js配置版本号
       // config.output.filename('static/js/[name].js?v=[contenthash:8]').end();
       // config.output.chunkFilename('static/js/[name].js?v=[contenthash:8]').end();

        // 给图片配置版本号
        config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options( {
            name:`[path][name].[ext]?v=${Timestamp}`, // 利用[path]路径获取文件夹名称并设置文件名
            fallback: 'file-loader',  // 当超过8192byte时,会回退使用file-loader
        }).end();
        //}
     },


})

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值