likes
comments
collection
share

Vue打包后，及时更新版本的一种方法

作者站长头像
站长
· 阅读数 37

打包设置

首先打包的时候，使用hash生成文件名，这样每次发包，文件名称都会不一样。

我们把新的文件发布到服务器上面就行。

我个人习惯这样做设置

defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        
      }
    },
    base: url,
    // 打包配置
    build: {
      sourcemap: true,
      outDir: 'distp', //指定输出路径
      assetsDir: 'static/img/', // 指定生成静态资源的存放路径
      brotliSize: false, // 不统计
      target: 'esnext', 
      minify: 'esbuild', // 混淆器，terser构建后文件体积更小
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              const arr = id.toString().split('node_modules/')[1].split('/')
              switch(arr[0]) {
                case '@naturefw': // 自然框架
                case '@popperjs':
                case '@vue':
                // eslint-disable-next-line no-fallthrough
                case 'element-plus': // UI 库
                case '@element-plus': // 图标
                  return '_' + arr[0]
                  // break
                default :
                  return '__vendor'
                  // break
              }
            }
          },
          chunkFileNames: 'static/js1/[name]-[hash].js',
          entryFileNames: 'static/js2/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    }

index.html 的自动更新

上面说的是js、css文件的更新方式，但是首页（index.html）如何更新？

默认情况下html文件是会被浏览器缓存的，如果客户已经浏览了index.html，那么下次打开，浏览器会直接从本地加载，可能不会从服务器更新。

那么如何确保 index.html 也一定会自动更新呢？我们可以使用 http-equiv 来设置不缓存。

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/nfwt.ico" />
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.1.11/dist/index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <title> nf-state 轻量级状态管理 的 demo </title>
  </head>

这样设置后 index.html 不会被缓存，而其体积也不大（2KB），不缓存也不会有影响。

那么里面的js、css会不会被缓存呢？我们测试一下看看。

nf-state 轻量级状态管理 的 demo

Vue打包后，及时更新版本的一种方法

js、css 都被缓存了。

这样既可以及时更新项目版本，又可以利用浏览器的缓存，提升显示速度。只需要用户关掉网页重新打开即可，或者按一下F5。

转载自:https://juejin.cn/post/7236263262073225274
评论
请登录