【前端】Vue 部署上线清除浏览器缓存的方式

【前端】Vue 部署上线清除浏览器缓存的方式

修改根目录index.html

在 head 里面添加下面代码

1

2

<meta http-equiv="pragram" content="no-cache">

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

 

配置 nginx 不缓存 html

vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有缓存的,需要在服务器配置不让缓存index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

server {

listen 80;

server_name yourdomain.com;

location / {

    try_files $uri $uri/ /index.html;

    root /yourdir/;

    index index.html index.htm;

    if ($request_filename ~* .*\.(?:htm|html)$)

    {

        add_header Cache-Control "no-cache, no-store"//对html文件设置永远不缓存

    

  }

}

  • no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200
  • no-store浏览器不缓存,刷新页面需要重新下载页面

打包的文件路径添加时间戳

1、在 vue-cli2.x 创建的项目里,找到 build/webpack.prod.conf.js 文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//定义一个变量获取当前时间戳

const version = new Date().getTime();

//output模块将时间戳加入到输出的文件名里

output: {

  publicPath: '/',

  path: config.build.assetsRoot,

  filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),

  chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${version}.js`)

},

//css文件名加时间戳

new ExtractTextPlugin({

    filename: utils.assetsPath(`css/[name].[contenthash].${version}.css`),

    allChunks: true,

}),

2、在 vue-cli3.x 创建的项目里,打开 vue.config.js 文件 ( 没有该文件自己在 src 同级目录下创建一个 )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

const version = new Date().getTime();

module.exports = {

    outputDir: 'dist', //打包的时候生成的一个文件名

    lintOnSave: false,

    productionSourceMap: false,

    css: {

        loaderOptions: {

          sass: {

            data: `@import "@/components/themes/_handle.scss";`

          }

        },

        // 是否使用css分离插件 ExtractTextPlugin

        extract: {

          // 修改打包后css文件名   // css打包文件,添加时间戳

          filename: `css/[name].${version}.css`,  

          chunkFilename: `css/[name].${version}.css`

        }

     },

    configureWebpack: {

        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】

             filename: `js/[name].[chunkhash].${version}.js`,

             chunkFilename: `js/[id].[chunkhash].${version}.js`

        }

    }

}

你可能感兴趣的:(前端技术,前端,缓存,java)