极客观点
研发管理
HarmonyOS
chrome版本号：129.0.6668.71（正式版本）+vite5+vue3+ant-desgin-vue 打包之后发布到服务器上之后白屏，（dev本地启动服务可以正常访问，不白屏）所有组件的文件浏览器都没有加载出来，但是chrome dev的131版本是可以正常显示的，也可以正常加载，稳定版的老版本（129以下的版本）也是没有问题的，求助大佬们有没有什么解决方案呀。
我怀疑是vite的打包分包有问题，调整了打包方式之后还是有问题
import { resolve } from 'node:path';
import { loadEnv } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
// import mkcert from 'vite-plugin-mkcert';
import vue from '@vitejs/plugin-vue';
import checker from 'vite-plugin-checker';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import Unocss from 'unocss/vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import dayjs from 'dayjs';
import mockServerPlugin from '@admin-pkg/vite-plugin-msw/vite';
import pkg from './package.json';
import type { UserConfig, ConfigEnv } from 'vite';
const CWD = process.cwd();
// 环境变量
// const BASE_ENV_CONFIG = loadEnv('', CWD);
// const DEV_ENV_CONFIG = loadEnv('development', CWD);
// const PROD_ENV_CONFIG = loadEnv('production', CWD);
const __APP_INFO__ = {
pkg,
lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
};
const timestamp = new Date().getTime();
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
// 环境变量
const { VITE_BASE_URL, VITE_DROP_CONSOLE, VITE_MOCK_IN_PROD } = loadEnv(mode, CWD);
const isDev = command === 'serve';
const isBuild = command === 'build';
return {
base: VITE_BASE_URL,
define: {
__APP_INFO__: JSON.stringify(__APP_INFO__),
},
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, './src'),
},
],
},
plugins: [
vue(),
Unocss(),
vueJsx({
// options are passed on to @vue/babel-plugin-jsx
}),
// 指定 mkcert 的下载源为 coding，从 coding.net 镜像下载证书
// mkcert({ source: 'coding' }),
mockServerPlugin({ build: isBuild && VITE_MOCK_IN_PROD === 'true' }),
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [resolve(CWD, 'src/assets/icons')],
// Specify symbolId format
symbolId: 'svg-icon-[dir]-[name]',
}),
Components({
dts: 'types/components.d.ts',
types: [
{
from: './src/components/basic/button/',
names: ['AButton'],
},
{
from: 'vue-router',
names: ['RouterLink', 'RouterView'],
},
],
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
exclude: ['Button'],
}),
],
}),
// https://github.com/fi3ework/vite-plugin-checker
isDev &&
checker({
typescript: true,
vueTsc: true,
eslint: {
lintCommand: 'eslint "./src/**/*.{.vue,ts,tsx}"', // for example, lint .ts & .tsx
},
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {},
additionalData: `
@import '@/styles/variables.less';
`,
},
// scss: {
// additionalData: `
// @use 'sass:math';
// @import "src/styles/global.scss";
// `,
// },
},
},
optimizeDeps: {
include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
},
esbuild: {
pure: VITE_DROP_CONSOLE === 'true' ? ['console.log', 'debugger'] : [],
supported: {
// https://github.com/vitejs/vite/pull/8665
'top-level-await': true,
},
},
build: {
target: 'es2022',
minify: 'esbuild',
cssTarget: 'chrome89',
chunkSizeWarningLimit: 2000,
rollupOptions: {
output: {
// minifyInternalExports: false,
//TODO fix circular imports
manualChunks(id) {
if (id.includes('/src/locales/helper.ts')) {
return 'vendor';
} else if (id.includes('ant-design-vue')) {
return 'vendor';
}
},
chunkFileNames: ({ name }) => {
if (name === 'vendor') {
return `assets/js/[name]-[hash].js`; // 第三方库不添加时间戳
} else {
return `assets/js/[name]-[hash]-${timestamp}.js`; // 自定义文件名，使用时间戳保证唯一性
}
},
entryFileNames: ({ name }) => {
if (name === 'vendor') {
return `assets/js/[name]-[hash].js`; // 第三方库不添加时间戳
} else {
return `assets/js/[name]-[hash]-${timestamp}.js`; // 自定义文件名，使用时间戳保证唯一性
}
},
assetFileNames: `assets/[ext]/[name]-[hash]-${timestamp}.[ext]`, // 资源文件添加时间戳
},
},
},
};
};
白屏的请求：（不是那个404导致的，已经试过了）
正常的请求：（dev版本的浏览器里面的请求）
chrome
看上去更像是浏览器的问题，可以去
vite仓库 看一下近期是否有类似的Issue，或者Chromium的BUG反馈 中看看是否有对应的反馈了。但是最好能排除是否是业务代码的问题，创建一个空白的项目把分片逻辑拷贝过去，稍微写一些业务代码看看构建之后是否能够稳定复现。
或者尝试在本地启动一个HTTP服务直接打开看看是否正常能够打开项目。