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();
        //}
     },


})

你可能感兴趣的:(vue.js,javascript,前端)