美文网首页
vuecli2和vuecli3解决部署浏览器缓存问题

vuecli2和vuecli3解决部署浏览器缓存问题

作者: 一个健康马 | 来源:发表于2022-03-21 10:49 被阅读0次

vuecli2解决办法

修改build/webpack.prod.conf.js路径里的文件

const version = new Date().getTime();//重点
output: {
  path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'),//重点
    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js')//重点
},

 new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing' ?
        'index.html' :
        config.build.index,
      template: 'index.html',
      inject: true,
      hash: version,//重点
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),


vuecli3解决办法

修改vue.config.js 配置

const path = require('path')
const webpack = require('webpack')
const timeStamp = new Date().getTime()
module.exports = {
  publicPath: './',
  // 将构建好的文件输出到哪里
  outputDir: 'dist',
  
  configureWebpack: { // 重点
    // 输出重构 打包编译后的js文件名称,添加时间戳.
    output: {
      filename: `js/[name].${timeStamp}.js`,//重点.
      chunkFilename: `js/chunk.[id].${timeStamp}.js`,//重点.
    }
  },
 
  css: { //重点.
    extract: { // 打包后css文件名称添加时间戳
      filename: `css/[name].${timeStamp}.css`,//重点.
      chunkFilename: `css/chunk.[id].${timeStamp}.css`,//重点.
    }
  }
}

相关文章

网友评论

      本文标题:vuecli2和vuecli3解决部署浏览器缓存问题

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