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 设置。

压缩 WSL2 的 vhdx 文件

vhdx文件

vhdx文件是虚拟机的虚拟磁盘文件,随着使用时间变长,vhdx 内会产生冗余文件,可以使用 diskpart 工具进行压缩。

操作步骤

1、关掉使用vhdx文件的进程。
cmd 命令:

1
wsl --shutdown

2、命令行启动 diskpart 工具,cmd命令:

1
diskpart

3、选择vhdx文件

cmd 命令:

1
select vdisk file = "D:\WSL\Debian-12-ext4.vhdx"

4、执行压缩命令:

cmd 命令:

1
compact vdisk

等待压缩进度到100即可。

参考:

https://learn.microsoft.com/zh-cn/windows/wsl/disk-space

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 官网安装插件。