vue项目打包后的网页缓存问题

最新推荐文章于 2024-05-16 22:38:13 发布

AwoCT

最新推荐文章于 2024-05-16 22:38:13 发布

阅读量790

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39480297/article/details/126182986

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、设置html

在入口文件 /public/index.html中，head 标签中，添加

<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

2、配置vue.config.js


const Timestamp = new Date().getTime()
module.exports = {
  productionSourceMap: false, // false : 不生成map文件
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 75, //px换算rem基数，100也就是 100px换算成1rem
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    },
    extract: {
      /**
       * 一、打包后的css 会带版本号，不改变文件名的。
       * filename: `css/[name].css?v=${Timestamp}`
       * chunkFilename: `css/[name].css?v=${Timestamp}`
       */
      /**
       * 二、一种方式，每次打包后的css文件名会变更新。
       */
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
  chainWebpack(config) {
    // 配置svg =======> svg-sprite-loader
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...
      config.mode = 'production';
      config["performance"] = {//打包文件大小配置
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 3000000000
      }
    }
    config.output.filename = `js/[name].${Timestamp}.js`
    config.output.chunkFilename = `js/[name].${Timestamp}.js`
  }
}