给公众号访问链接动态的添加时间戳(vue)

优化微信网页缓存问题

缓存严重导致:
1.问题是微信浏览器的内核已经对页面渲染完了,但是vue的app.js还没有加载,导致阻断白屏,
2.几个js的加载顺序不对。
3.由于缓存,第一次进入还访问的是以前清掉的的页面
4.还有服务器放包,老是增量放包,全量放页面就访问不到
解决办法如下几种:
1.就是给vue的入口文件加个强制刷新,index的meta设置不缓存属性
2.在build的webpack.prod.conf.js改变js的顺序
3.在build的webpack.prod.conf.js的output下的filename和chunkfilename加个时间戳
4.让公众号的菜单先跳入一个空白页面,空白页在链接后面增加时间戳再跳入vue的正式首页地址
jump的代码,从jump转入index
第四种引用https://blog.csdn.net/qq_39024950/article/details/106530081

   <script>
      const str=window.location.href;
      const domain=str.replace('jump','index')
      const newURL=domain+"?t="+new Date().getTime()
      window.location.href=newURL
    </script>

在config下面的index.js中做如下修改

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    //增加jump的入口
    jump: path.resolve(__dirname, '../dist/jump.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

在webpack.prod.conf.js增加jump出口

    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'jump.html',
      inject: true,
      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'
    }),
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值