Preface
There is no problem locally, there is a problem with packaging. Finally, the problem is i18n problem. Here is the record
Cause analysis
Special symbols are misinterpreted：
- Some special symbols may be specially processed during string parsing, such as in certain contexts
@May be regarded as an instruction or a special mark.
Coding or escape issues：
- If special characters are not escaped correctly, they may cause errors when parsing, or problems occur when converting between different encoding formats.
The parsing rules of a framework or library：
- Vue I18n or other involved libraries may have specific parsing rules that may conflict with the existence of special characters.
Solution
Correct escape characters：
Make sure that those special symbols that may cause problems are properly escaped in i18n's string.
For example, if@Symbols cause problems, try to see if there is an escape method that works for the scenario, or check the document to confirm if the character has special meaning.
Use quotes：
Use single or double quotes to wrap strings containing special characters, which sometimes prevents incorrect parsing.
For example:
{
"message": "This is a special character: '@'"
}
String literal：
When defining an i18n string in JavaScript, use a template string or an appropriate string concatenation to ensure that all special characters are handled literally, such as backticks (`）：
export default {
en: {
message: `This is a special character: '@'`
}
}
1. Escape of special characters
In multilingual JSON or JavaScript files, special characters usually need to be escaped to ensure that they do not destroy the structure of the string or throw an error.
Common special characters that need to be escaped include:
-
Double quotes ("): If your string is surrounded by double quotes, the double quotes inside the string need to be escaped. For example:
"greeting": "Hello, \"world\"!"。 -
Backslash (\): The backslash itself also needs to be escaped because it is a symbol that escapes other characters. For example:
"path": "C:\\Users\\name"。 -
Line breaks (\n) and tabs (\t): When you need to directly include such a blank character in a string, you should use escape sequences
\nand\t。
2. Interpolation of placeholders and variables
Vue I18n allows the use of variables in strings that are replaced with corresponding values when displayed.
When processing these variables, make sure that the structure of the original string is not destroyed due to the variable content:
- Basic usage：
//
export default {
en: {
message: "Hello, {name}!"
}
}
- Use in components:
<template>
<p>{{ $t('message', { name: 'Alice' }) }}</p>
</template>
3. HTML tags
If your string contains HTML tags and you want to parse these tags in your app instead of being displayed as plain text, you need to use Vue I18n'sv-htmlDirectives or corresponding methods to handle:
- Configuring HTML in i18n：
//
export default {
en: {
message: "Click <a href='/link'>here</a> to learn more."
}
}
- Use in components:
<template>
<p v-html="$t('message')"></p>
</template>
4. Multi-line string
When dealing with multi-line strings, you can use backslashes to implement multiple lines in JSON, but this approach can be cumbersome in some cases.
The recommended approach is to use template text or appropriate string concatenation methods:
- Using multiple lines in JSON：
{
"message": "This is a very long message that spans across multiple lines \
and needs to be properly handled in the JSON file."
}
- Multi-line processing in JavaScript files：
// Use ES6 template stringexport default {
en: {
message: `This is a very long message
that spans across multiple lines
and needs to be properly handled.`
}
}
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.