Vue3 组合式 API 使用 i18n 实现本地化

Vue3 使用选项式 API 较容易,按文档上手就行,这里就不多说。组合式 API 上手会比较麻烦一点。

创建实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
locale: 'cn', // 设置当前语言
legacy: false, // 要支持组合式API,此项必须设置为false;
// globalInjection: true, // 全局vue视图中注册$t方法,vue-i18n v9.2 之后默认是 true
messages: {
cn: {
message: {
hello: '你好',
},
},
en: {
message: {
hello: 'hello',
},
},
},
});

const app = createApp(App);
app.use(i18n);
app.mount('#app')

基本使用

1
2
3
4
5
6
7
8
9
10
<!-- App.vue -->
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n(); // 组合式 API 使用 vue-i18n,关键是 createI18n 的 legacy 参数要设置成 false
console.log(t('message.hello'));
</script>

<template>
<div>在视图中使用语言: {{ $t('message.hello') }}</div>
</template>

自定义全局方法使用 vue-i18n

组合式 API 每次要 import 又要导出要用的函数,需要频繁使用,这样太麻烦了。
我们可以定义 window.$t 全局函数,这样在 setup 中也能直接用 $t()取得语言信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
locale: 'cn',
messages: {
cn: {
hello: '你好',
},
en: {
hello: 'hello',
},
},
});

window.$t = function() {
return i18n.global.t(...arguments);
}

const app = createApp(App);
app.use(i18n);
app.mount('#app')

备注

更多用法见官方文档: https://vue-i18n.intlify.dev/guide/

Git 设置 Socks5 代理

全局设置代理

1
2
git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'

取消全局代理

1
2
git config --global --unset http.proxy
git config --global --unset https.proxy

指定域名使用代理

1
2
3
4
5
#只对github.com
git config --global http.https://github.com.proxy socks5://127.0.0.1:1080

#取消代理
git config --global --unset http.https://github.com.proxy

在 .git/config 配置文件中设置代理

.git/config 文件中添加配置:

1
2
[https]
proxy = socks5://127.0.0.1:1080

ssh 代理连接(使用 ssh 访问 git 的解决方案)

前面设置的都是 https 代理, GitHub 都要求通过 ssh key 来提交,我们可以在 ~/.ssh/config 配置文件中设置使用代理连接 ssh

1
2
3
4
5
6
7
8
9
10
Host github.com
HostName github.com
User git
IdentityFile C:\Users\cmpan\.ssh\github
ProxyCommand "C:\Program Files\Git\mingw64\bin\connect" -S 127.0.0.1:1080 -a none %h %p
``````

```sh
# MacOS
ProxyCommand nc -v -x 127.0.0.1:1080 %h %p

终极方案

如果你有一台外网的 Linux 服务器,你可以用该服务器作为代理。

1
2
3
4
5
6
7
8
9
10
11
12
13
# 作为代理的ssh连接参数
Host pxy
HostName IP地址
Port 22
User pxy
IdentityFile ~/.ssh/pxy

# GitHub 连接参数
Host github.com
HostName github.com
User git
IdentityFile ~/.ssh/github_auth
ProxyCommand ssh pxy -W %h:%p # pxy 为代理ssh连接对应的 Host,在 Linux/Mac/Windows 上通用

WSL使用指南

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 查看已安装发行版
wsl -l -v

# 设置默认发行版
wsl --set-default <Distribution Name>

# 启动默认发行版
wsl

# 启动指定发行版
wsl -d <Distribution Name>

# 指定登录用户启动 wsl
wsl -u <User Name>

# 更改发行版的默认用户
<DistributionName> config --default-user <Username>

# 关闭 wsl 的运行
wsl --shutdown

# 关闭指定发行版
wsl --terminate <Distribution Name>

更多命令见 WSL 官网

查看宿主机ip地址

宿主机 ip 在子系统的 /etc/resolv.conf 文件中的 nameserver 设置。

Debian 新系统部署

基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# 更新
sudo apt update
sudo apt upgrade
# 添加新用户
sudo adduser 用户名 -g users
# 给用户添加 sudo 权限
sudo usermod -aG sudo 用户名
# 配置 ssh key 登录
sudo mkdir -p /home/用户名/.ssh
vim /home/用户名/.ssh/authorized_keys
# 贴入 ssh 公钥
chown -R 用户名:users /home/用户名

设置自定义命令

/etc/profile 文件添加一下配置

1
2
3
4
5
alias l="ls -lhF --color"
alias ll="ls -lAhF --color"
alias la="ls -A --color"
alias clean="history -c; history -w"
alias ws="cd ~/workspace"

source /etc/profile

ssh 登录设置

1
2
3
sudo vim /etc/ssh/sshd_config
PasswordAuthentication no # 禁用密码登录
PermitRootLogin no # 禁止root用户登录,可通过user0登录后切换到root

安装应用包

1
sudo apt install git

Windows 11 配置 ssh-agent,秘钥登录自动填写key口令

ssh-agent 可以保存 ssh 秘钥的口令,让我们用 ssh 秘钥登录时,不需要输入秘钥的口令。

Windows 安装 git 后, 其带的 OpenSSH 被安装到 C:\Windows\System32\OpenSSH 文件夹,但是 ssh-agent 服务没有启动。

打开管理员权限的 Power Shell,输入命令:

1
2
3
4
# 把 `ssh-agent` 添加为开机自启动的系统服务
Set-Service ssh-agent -StartupType Automatic
# 启动 ssh-agent 服务
Start-Service ssh-agent

这样我们就把 ssh-agent 添加为开机自启动的系统服务了。

1
2
3
4
5
# 把私钥加入 ssh-agent
ssh-add .ssh\id_rsa

# 查看已加入 ssh-agent 的私钥
ssh-add -l

Windows 下设置 GitHub 2FA

1、安装认证器

在 Microsoft Store 搜索 OTPKEY Authenticator 并安装。

如果你用 iPhone,可以用 Microsoft Authenticator APP,安卓的很多 APP 要通过谷歌应用商店安装,国内太麻烦,不如直接用 Windows 的方便。

2、打开设置 2fa 二维码

电脑浏览器登录GitHub账号 -> “Settings” -> “Password and authentication” -> “Enable two-factor authentication” -> “Set up using an app” -> “Continue”,看到一个二维码。

3、设置 OTPKEY Authenticator

2fa

Windows 打开 OTPKEY Authenticator 程序,点击右上角的加号,然后再点右上角的二维码形状图标,把弹出窗口拖到上一步的二维码上,将自动填入到 Secret 输入框,再把前面两个输入框填完后点“ADD”,你将看到一串6位的数字。

把6位数字输入到 “Verify the code from the app” 输入框 -> “Download”,保存恢复代码 -> “I have saved my recovery codes” -> “Done”,设置完成。

4、2FA 登录

用账号密码登录 GitHub 后,Windows 打开 OTPKEY Authenticator 程序,看到6位数字,在浏览器输入该6位数字即可登录成功。

如果 OTPKEY Authenticator 打不开或不能生成验证码,可用前面下载的恢复吗登录。

配置 GitHub 通过 SSH 秘钥连接

1. 生成key

1
2
ssh-keygen -t ed25519 -f ~/.git/github_auth -C '备注,可用邮箱'

2. 添加秘钥到 ssh-agent

如果自定义了秘钥文件名,就需要把秘钥添加到 ssh-agent 中。

1
2
3
ssh-add ~/.ssh/github_auth
# 如果秘钥有口令,则加上 -K 参数,输入口令后,就不用每次连接都要输入 key 口令
ssh-add -K ~/.ssh/github_auth

这一步也可以通过 ssh config 文件来显式设置域名用指定的秘钥

1
2
3
4
5
6
7
vim ~/.ssh/config

# 加入下面的内容

Host github.com # ssh 主机名
HostName github.com # 连接域名或IP
IdentityFile ~/.ssh/github_auth # 私钥路径

3. 添加秘钥到 GitHub 账户

个人中心 Settings -> SSH and GPG keys -> New SSH Key

~/.ssh/github_auth.pub 内容粘贴到 Key 输入框。

4. 验证

用一下命令验证是否配置成功。

1
ssh -T git@github.com

注:

安装好 git 后,需要先设置全局用户名和邮箱才能使用。

1
2
3
git config --list
git config --global user.name "Your Name"
git config --global user.email "youremail@yourdomain.com"

PhpStorm / WebStorm WSL 前端开发环境配置

1、创建项目

WSL 中用 npm 创建 vue 项目。

(不用 pnpm 是因为:用 WSLpnpm 安装 node 包后,Windows 下的 PhpStorm 2023.2.1 识别不出,希望官方能早点解决。)

1
2
3
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm i

2、打开项目

wsl 前端开发

用 PhpStorm/WebStorm 打开 WSL 项目。

3、配置 Node.js 和 npm

wsl 前端开发

打开 Node.js 和 npm 配置,解释器选择 WSL 上的 Debian /usr/bin/node,包管理器选择 WSL 上的 npm

4、运行开发环境

wsl 前端开发

打开 PhpStorm 的终端窗口,终端自动进入 WSL 上的项目文件夹,输入 npm run dev 启动开发服务器,支持热加载。用浏览器打开 http://localhost:5173/ 浏览页面,编辑 src/components/HelloWorld.vue 文件,不需要刷新就能看到页面热更新。

解决 Windows 系统设置代理 Chrome 不能访问 Google 的问题

Chrome 不能单独设置代理而是用系统代理,据说 Windows 系统设置的代理是 socks4 代理,开系统代理后,用 Chrome 打不开 Google,Chrome 登录不了 Google 账号。

开系统设置代理后,虽然打不开 gooogle.com,但是可以打开这个 chrome 应用商店:

1
https://chrome.google.com/webstore/category/extensions

这样我们就可以先安装 Chrome 代理插件,再在 Chrome 彩礼插件中设置 socks 5 代理。

我装了 FoxyProxy Standard 代理,可行。

如果只需要上网,可以用 Firefox,它有设置代理的地方。
如果只是为了使用 Chrome 扩展,可以用 Edge,Edge 使用和 Chrome 一样的内核,可以从 Chrome 官网安装插件,也可以从 Edge 官网安装插件。

PHPStorm 配置 WSL PHP 开发文件

WSL 跨文件操作性能比较差,WSL Debian PHP 解释器执行 Windows 上的代码速度会很慢,因此 PHP 项目代码要保存在 WSL Debian 中。

1、打开项目文件夹

点击 PHPStorm 的 文件 > 打开,选择 \wsl$\Debian 目录,找到 WSL Debian 系统上的项目文件夹,这样就可以打开 WSL Debian 上的项目文件夹了。

2、WSL Debian 安装 PHP

1
2
3
4
sudo apt update
sudo apt install php php-dev php-gd php-curl php-mysql \
php-mbstring php-redis php-xdebug php-intl php-zip \
composer
阅读更多