46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import vue from '@vitejs/plugin-vue'
|
|
import { defineConfig, type Plugin } from 'vite'
|
|
|
|
/**
|
|
* 打包后的代码块之间按需加载写的是 import("./X.js")，应该相对于代码块自己（/assets/）解析。
|
|
* Chrome 94 在 Promise 回调里调用 import() 时（Vite 的预加载就是这样）有时会相对于网页地址解析，
|
|
* 去请求 /X.js、拿到首页 HTML，页面一片空白，时好时坏。改成 /assets/X.js 这样的绝对路径就不受影响。
|
|
*/
|
|
function absoluteDynamicImports(): Plugin {
|
|
let prefix = '/assets/'
|
|
return {
|
|
name: 'absolute-dynamic-imports',
|
|
apply: 'build',
|
|
configResolved(config) {
|
|
prefix = `${config.base}${config.build.assetsDir}/`
|
|
},
|
|
// 文件名的 hash 在 generateBundle 之前就算好了，这里让改过的代码块换个文件名，浏览器不会用缓存里没改过的旧文件
|
|
augmentChunkHash(chunk) {
|
|
if (chunk.dynamicImports.length > 0) return 'absolute-dynamic-imports'
|
|
},
|
|
// 等 Vite 按 import("./X.js") 找出每个代码块要预加载的 CSS 和依赖之后再改
|
|
generateBundle: {
|
|
order: 'post',
|
|
handler(_, bundle) {
|
|
for (const chunk of Object.values(bundle)) {
|
|
if (chunk.type === 'chunk') chunk.code = chunk.code.replace(/\bimport\((["'])\.\//g, `import($1${prefix}`)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
export default defineConfig({
|
|
plugins: [vue(), absoluteDynamicImports()],
|
|
// 机房电脑的浏览器是 Chrome 94：语法和 CSS 按它转换，缺的功能在 src/polyfills.ts 里补
|
|
build: { target: ['chrome94', 'edge94'] },
|
|
server: {
|
|
port: 5173,
|
|
proxy: {
|
|
'/api': 'http://localhost:3000',
|
|
'/resources': 'http://localhost:3000',
|
|
'/ws': { target: 'ws://localhost:3000', ws: true },
|
|
},
|
|
},
|
|
})
|