1***@qq.com
1***@qq.com
  • 发布:2024-03-21 14:00
  • 更新:2024-10-23 22:12
  • 阅读:662

uni-app+vue3 h5打包时,不用hash作为文件名

分类:uni-app

uni-app+vue3 h5打包时,打包的资源文件名都带有hash,如何修改设置为自定义的呢?

    rollupOptions: {  
      output: {  
        chunkFileNames: `static/js/[name]-${version}.js`,  
        entryFileNames: `static/js/[name]-${version}.js`,  
        assetFileNames: `static/[ext]/[name]-${version}.[ext]`  
      }  
    }

上面这样设置不起效果,uni-app中需要怎么设置呢?

2024-03-21 14:00 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com

在 h5端, 除了 chunkFileNames , 你的 配置 应该都生效吧?

你可以 看下 源码, uniapp也是 基于 vite插件 来 做的

你可以 通过 "build:h5": "uni build --debug", 看看 uni都用了什么 插件

  vite:esbuild init tsconfck end +0ms  
  vite:config using resolved config: {  
  vite:config   plugins: [  
  vite:config     'uni:pre',  
  vite:config     'vite:build-metadata',  
  vite:config     'vite:pre-alias',  
  vite:config     'alias',  
  vite:config     'uni:automator',  
  vite:config     'uni:cloud',  
  vite:config     'uni:cloud-vf',  
  vite:config     'uni:push',  
  vite:config     'uni:stat',  
  vite:config     'uni:css-scoped',  
  vite:config     'uni:h5-resolve-id',  
  vite:config     'uni:h5-main-js',  
  vite:config     'uni:h5-manifest-json',  
  vite:config     'uni:h5-pages-json',  
  vite:config     'uni:h5-css',  
  vite:config     'vite:modulepreload-polyfill',  
  vite:config     'uni:resolve-id',  
  vite:config     'vite:resolve',  
  vite:config     'vite:html-inline-proxy',  
  vite:config     'vite:css',  
  vite:config     'uni:pre-css',  
  vite:config     'vite:esbuild',  
  vite:config     'uni:json',  
  vite:config     'vite:json',  
  vite:config     'vite:wasm-helper',  
  vite:config     'vite:worker',  
  vite:config     'uni:static',  
  vite:config     'vite:asset',  
  vite:config     'uni:pre-vue',  
  vite:config     'vite:vue',  
  vite:config     'uni:ssr',  
  vite:config     'uni',  
  vite:config     'uni:cloud',  
  vite:config     'uni:h5-easycom',  
  vite:config     'uni:h5-ssr',  
  vite:config     'uni:setup',  
  vite:config     'uni:h5-renderjs',  
  vite:config     'uni:h5',  
  vite:config     'uni:copy',  
  vite:config     'vite:wasm-fallback',  
  vite:config     'vite:define',  
  vite:config     'vite:css-post',  
  vite:config     'vite:build-html',  
  vite:config     'vite:worker-import-meta-url',  
  vite:config     'vite:asset-import-meta-url',  
  vite:config     'vite:force-systemjs-wrap-complete',  
  vite:config     'vite:watch-package-data',  
  vite:config     'commonjs',  
  vite:config     'vite:data-uri',  
  vite:config     'vite:dynamic-import-vars',  
  vite:config     'vite:import-glob',  
  vite:config     'uni:cloud-inject',  
  vite:config     'uni:h5-inject',  
  vite:config     'vite:build-import-analysis',  
  vite:config     'vite:esbuild-transpile',  
  vite:config     'vite:terser',  
  vite:config     'vite:reporter',  
  vite:config     'vite:load-fallback'  
  vite:config   ]

关键插件 是 uni:h5
你 搜索一下 node_modules

function uniH5Plugin() {  
    const configOptions = {  
        resolvedConfig: null,  
    };  
    rewriteReadFileSync();  
    return {  
        name: 'uni:h5',  
        uni: (0, uni_1.createUni)(),  
        config: (0, config_1.createConfig)(configOptions),  
        configResolved(config) {  
            configOptions.resolvedConfig = config;  
        },  
        configureServer: (0, configureServer_1.createConfigureServer)(),  
        handleHotUpdate: (0, handleHotUpdate_1.createHandleHotUpdate)(),  
        transformIndexHtml: (0, transformIndexHtml_1.createTransformIndexHtml)(),  
    };  
}

看见 config: (0, config_1.createConfig)(configOptions),了吧, 这个 函数 就是 原因了, 里面有 build.rollupOptions.output.chunkFileNames 把你的 覆盖了

lilang

lilang

解决了吗大佬

2***@qq.com

2***@qq.com

rollupOptions: {  
            output: {  
                entryFileNames(chunkInfo) {  
                    return `static/js/${chunkInfo.name}.${timestamp}.js`;  
                },  
                //需要注释掉 @dcloudio/uni-h5-vite/dist/plugin/config.js 中的同名方法,不然不会生效  
                chunkFileNames: (chunkInfo) => {  
                    const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];  
                    //console.log(facadeModuleId);  
                    if (chunkInfo.facadeModuleId?.length) {  
                        const fileName = `pages-${facadeModuleId[facadeModuleId.length - 2]}-${facadeModuleId[facadeModuleId.length - 1]}`;  
                        console.log('正在打包' + fileName);  
                        return `static/js/${fileName}.${timestamp}.js`;  
                    } else {  
                        console.log('正在打包', `static/js/[name].${timestamp}.js`);  
                        return `static/js/[name].${timestamp}.js`;  
                    }  
                },  
                // 资源文件像 字体,图片等  
                assetFileNames: (assetInfo) => {  
                    if (assetInfo.name && assetInfo.type === 'asset' && /\.(jpe?g|png|gif|svg)$/i.test(assetInfo.name)) {  
                        return 'static/images/[name].[hash].[ext]';  
                    }  
                    if (assetInfo.name && assetInfo.type === 'asset' && /\.(ttf|woff|woff2|eot)$/i.test(assetInfo.name)) {  
                        return 'static/fonts/[name].[hash].[ext]';  
                    }  
                    return 'static/[ext]/[name]-[hash].[ext]';  
                },  
            },  
        },

注意chunkFileNames方法上边的注释说明。

蚊子不会滑雪

蚊子不会滑雪

楼主是要解决打包hash变化的问题吗

  • 2***@qq.com

    将hash改为时间戳就行了。

    2024-08-16 16:51

4***@qq.com

4***@qq.com

要回复问题请先登录注册