Vue部署到服务器后组件不显示的排查与i18n踩坑记录
文章目录
- 一、问题背景
- 二、排查过程
- 路径是否正确
- 静态资源加载问题
- CSS文件问题
- 查控制台
- 本地查控制台
- 服务器查控制台
- 确定问题根源
- 三、解决方法
- 使用@@转义
- 将邮箱使用硬编码
- 四、总结
一、问题背景
最近在搭建自己的个人网站，前端主要是用的Vue3和Vite构建，然后在服务器上挂了个Nginx，每次更新服务器的时候，就是在本地用npm run build打包成静态文件之后传到服务器，虽然有点麻烦，但是对我这种初学者来说也够了。
我的个人网站的首页由左右两部分组成，左边用来展示我的个人信息，右边我还没想好干什么用，就先写了个placeholder，如下图所示。
为了让自己的网站看起来高级一点，我给自己的网站添加了“国际化”，就像右上角一样可以切换中文和英文。按照AI的指导，使用了i18n这个库。结果网页在本地调试的好好的，一到服务器上就不显示我的个人信息页了，如下图所示。
万万没想到i18n就是问题的根源。
二、排查过程
有问题先问AI。我直接把项目的代码给大模型，它让我从以下几个方面找问题：
- 路径是否正确
- 静态资源加载问题
- CSS文件问题
按照以上思路我一个个排查。
路径是否正确
首先文件大小写没问题，文件资源导入的路径也没问题，因为其它的页面都能正常显示。
静态资源加载问题
这个时候就有意思了。我去Console-Network页面看有没有加载我的头像之类的静态资源，结果发现不是404，而是根本就没加载。
CSS文件问题
AI说：在某些Vite版本或服务器环境中，静态CSS以相对路径导入时会出问题，尤其是build后路径层级变化时。
但是经过排查也不是这方面的问题，到此为止就彻底排除了路径之类的问题。
查控制台
本地查控制台
我先在本地调试查控制台，发现了3个报错：
这个报错的大概意思是，i18n在解析翻译字符串时，把我的邮箱字符串当成了语法表达式去翻译然后报错。
根据Vue-i18n的语法规则，@表示linked message，用于引用另一条翻译，例如：
hello: 'Hello @:name'
上面的写法会去找另一条名为name的 key。
我的i18n代码大概如下：
export default {
nav: {
brand: '杰瑞本锐的个人主页',
home: '首页',
blog: '博客',
papers: '论文',
tools: '工具',
development: '开发'
},
personal: {
name: '杰瑞本锐',
title: 'JerryBerry',
bio: '人工智能方向（还没写完）',
email: "jerryberry@whut.edu.cn",
university: '武汉理工大学'
},
在我的邮箱地址里，它在解析时会把@whut当作一个链接引用，却发现后面既没有:也没有合法key，于是报错Invalid linked format —— 无效的链接格式。也就是说，i18n把邮箱里的@whut当成了语法结构，而不是普通字符。
总结成一句话就是，Vue-i18n把我的邮箱当成了它自己的“语法表达式”，试图去解析@whut.edu.cn，但失败了。
因为这是在本地调试的时候报的错，但是本地又能正常显示我的个人信息页，所以刚开始我并没有太当回事。
服务器查控制台
然后部署到服务器上查控制台，发现了1个报错：
服务器上也是i18n报错，这让我不得不往i18n方面来想了。
确定问题根源
根据上面说的i18n中@符号的问题，我直接把我的邮箱删掉，然后部署到服务器看能不能渲染，结果发现真就正常了。
删掉邮箱之后，本地和服务器上的Console都不报错了，问题初步解决。
三、解决方法
使用@@转义
AI首先跟我提出的解决方法是使用@@转义@，但是经过测试下来我并没有成功。
将邮箱使用硬编码
转念一想，邮箱好像全球都一样，不需要国际化，所以可以直接在代码里写死，然后把i18n里的email注释掉。
jerryberry@whut.edu.cn
把邮箱写死了之后再部署到服务器，一切正常，个人信息也能显示了，头像等静态资源也能读取了，控制台也不报错了，问题解决～
四、总结
这个问题虽然小，但却非常典型。在前端国际化实践中，像邮箱、网址、命令行语句等都可能被Vue-i18n误解析。
希望这篇博客能帮到遇到同样坑的你。
最后补一句AI的总结：
Vue-i18n 很强大，但它也很“敏感”。
在国际化语言包中，谨慎使用带有特殊符号的字符串，就能少掉很多坑。
