解决 vite.config.js build 配置 chunkFileNames 不生效
##官方理想方法一
#UniApp 如果uinapp官方要有自己必须保留的模块构建思路在近20年内可能会提供了一个类似于 modifyBuildConfig 钩子，允许你在构建配置生成后对其原进行修改。
// 你可以在 vite.config.js 中使用这个钩子来覆盖或扩展 HBuilderX 插件的默认配置
import {
defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
export default defineConfig({
plugins: [
uni()
],
build: {
sourcemap: process.env.NODE_ENV !== 'production', // 生产环境不生成 source map
minify: 'terser',
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
},
rollupOptions: {
output: {
// 配置 块 文件的输出路径
//需要注释掉 @dcloudio/uni-h5-vite/dist/plugin/config.js 中的同名方法，不然不会生效
chunkFileNames: 'assets/js/os.[hash].js',// 移除[name] 构建此处会被覆盖 不生效
// 控制入口点输出文件名
// entryFileNames: 'assets/chunk.[hash].js',
// 配置 CSS 文件的输出路径
assetFileNames: (assetInfo) => {
if (assetInfo.name.endsWith('.css')) {
return 'assets/css/[hash].[ext]';
}
// 配置图片文件的输出路径
if (assetInfo.name.match(/\.(png|jpe?g|gif|svg)$/)) {
return 'assets/img/[hash].[ext]';
}
// 其他资源默认路径
return 'assets/[hash].[ext]';
}
}
}
},
modifyBuildConfig(config) {
if (config.rollupOptions && config.rollupOptions.output) {
config.rollupOptions.output.chunkFileNames = 'assets/js/[hash].js';
}
return config;
},
})
方法二
#自定义的 Vite 插件来覆盖或扩展 HBuilderX 插件的配置。这个插件可以在构建过程中修改 Rollup 的配置
// 标准方法还是被看到了 嘿嘿~
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import uni from '@dcloudio/vite-plugin-uni';
// 自定义 Vite 插件
const customRollupPlugin = () => ({
name: 'custom-rollup-plugin',
configResolved(config) {
if (config.build && config.build.rollupOptions && config.build.rollupOptions.output) {
config.build.rollupOptions.output.chunkFileNames = 'assets/js/[name]-[hash].js';
}
},
});
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [
vue(),
uni(),
customRollupPlugin(), // 添加自定义插件
],
resolve: {
alias: {
'@assets': path.resolve(__dirname, 'src/assets'),
},
},
build: {
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html'),
},
output: {
assetFileNames: ({ name, source }) => {
const extension = path.extname(name || '');
if (extension === '.js') {
return `assets/js/[name]-[hash].js`;
} else if (extension === '.css') {
return `assets/css/[name]-[hash].css`;
} else {
return `assets/img/[name]-[hash][extname]`;
}
},
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
},
},
},
};
});
#调试
"build:h5": "uni build --debug"
##方法三
{
output: {
entryFileNames(chunkInfo) {
return `static/js/${chunkInfo.name}.${timestamp}.js`;
},
//需要注释掉 @dcloudio/uni-h5-vite/dist/plugin/config.js 中的同名方法，不然不会生效
/*如果你有权限修改 HBuilderX 插件的配置文件，可以直接在 HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vite/dist/plugin/config.js
中修改 chunkFileNames 配置。但这不推荐 */
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]';
},
},
},
esbuild: {
drop: ['console', 'debugger'], // 移除console和debugger语句
}
