问题:使用 vue-i18n 运行时版本后,带变量的翻译(如 '{days} 天')
无法正确显示,直接显示原始字符串。
原因:运行时版本不含消息编译器,无法在运行时编译消息插值。
解决:启用 JIT 编译(__INTLIFY_JIT_COMPILATION__: true)
- JIT 编译器将消息编译为 AST 对象而非 JavaScript 代码
- 通过解释执行 AST 实现插值,无需 eval 或 new Function
- 符合 CSP script-src 'self' 策略,不降低安全性
同时将 vite.config.js.timestamp-* 临时文件添加到 .gitignore
45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import checker from 'vite-plugin-checker'
|
|
import { resolve } from 'path'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
vue(),
|
|
checker({
|
|
typescript: true,
|
|
vueTsc: true
|
|
})
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
'@': resolve(__dirname, 'src'),
|
|
// 使用 vue-i18n 运行时版本,避免 CSP unsafe-eval 问题
|
|
'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
|
|
}
|
|
},
|
|
define: {
|
|
// 启用 vue-i18n JIT 编译,在 CSP 环境下处理消息插值
|
|
// JIT 编译器生成 AST 对象而非 JS 代码,无需 unsafe-eval
|
|
__INTLIFY_JIT_COMPILATION__: true
|
|
},
|
|
build: {
|
|
outDir: '../backend/internal/web/dist',
|
|
emptyOutDir: true
|
|
},
|
|
server: {
|
|
host: '0.0.0.0',
|
|
port: 3000,
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:8080',
|
|
changeOrigin: true
|
|
},
|
|
'/setup': {
|
|
target: 'http://localhost:8080',
|
|
changeOrigin: true
|
|
}
|
|
}
|
|
}
|
|
})
|