为什么要加版本号?因为有时候打包文件部署上线后发现线上没更新,原因是因为线上环境有缓存,故加上版本号可解决此问题!

在vue.config.js配置:
输出文件名js文件增加版本号:

output: {
      filename: `js/[name].${Version}.js`,
      chunkFilename: `js/[name].${Version}.js`
    },

输出文件名css文件增加版本号:

    css: {
	    
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名   // css打包文件,添加时间戳
	      filename: `css/[name].${version}.css`,   
	      chunkFilename: `css/[name].${version}.css`
	    }
	 },

在vue.config.js文件中module.exports下增加:
在这里插入图片描述
实现css、js文件增加版本号解决上线缓存导致改动没更新问题

vue.config.js:

const Version = new Date().getTime() + '-2.0.0.2'
const webpack = require('webpack')
module.exports = {
  publicPath: './',
  lintOnSave: false,
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  
  css: {    
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名   // css打包文件,添加时间戳
	      filename: `css/[name].${version}.css`,   
	      chunkFilename: `css/[name].${version}.css`
	    }
	 },
	 
 configureWebpack: {
    output: {
      filename: `js/[name].${Version}.js`,
      chunkFilename: `js/[name].${Version}.js`
    },

    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  },
  devServer: {
    disableHostCheck: true,
    port: 80,
    proxy: {
      '/': {
        target: 'http://192.168.8.8:8888/',
        changeOrigin: true,
        ws: false
      }
    }
  }
}

感谢阅读,有帮助的话点点赞点点关注谢谢哈。

Logo

前往低代码交流专区

更多推荐