CentOS 7 安装 vsftpd（虚拟用户 + FTPS）

⚠️ 请先用 root 或 sudo -i

==============================
一、系统基础设置
==============================

# 1. 安装中文语言包（支持中文编码）
yum install -y kde-l10n-Chinese glibc-common

# 查看可用语言
localectl list-locales | grep zh

# 设置系统默认中文 UTF-8
localectl set-locale LANG=zh_CN.UTF-8

# 重新登录后生效，验证
locale

# 2. 设置时区
timedatectl list-timezones | grep Shanghai
timedatectl set-timezone Asia/Shanghai
date

# 3. 时间同步（chrony）
yum install -y chrony
systemctl enable chronyd
systemctl start chronyd
timedatectl status

==============================
二、永久关闭 SELinux（CentOS 必做）
==============================

# 临时关闭（立即生效）
setenforce 0

# 永久关闭
sed -i 's/^SELINUX=.*/SELINUX=disabled/' /etc/selinux/config

# 查看确认（需要重启后完全生效）
getenforce

==============================
三、安装 vsftpd 及依赖
==============================

yum install -y vsftpd db4-utils openssl firewalld

systemctl enable firewalld
systemctl start firewalld

==============================
四、创建 FTP 虚拟用户宿主账户
==============================

useradd -r -d /srv/ftp -s /sbin/nologin ftpvirt
mkdir -p /srv/ftp
chown -R ftpvirt:ftpvirt /srv/ftp

==============================
五、vsftpd 目录结构
==============================

mkdir -p /etc/vsftpd
mkdir -p /etc/vsftpd/vuser_conf

==============================
六、创建虚拟用户
==============================

# 用户名 / 密码（两行一组）
cat > /etc/vsftpd/virt_users.txt <<EOF
scientistzjf
YOUR_PASSWORD
EOF

# 转换为 db 文件
db_load -T -t hash \
-f /etc/vsftpd/virt_users.txt \
/etc/vsftpd/virt_users.db

chmod 600 /etc/vsftpd/virt_users.*

==============================
七、PAM 虚拟用户认证
==============================

cat > /etc/pam.d/vsftpd_virtual <<EOF
auth required pam_userdb.so db=/etc/vsftpd/virt_users
account required pam_userdb.so db=/etc/vsftpd/virt_users
EOF

==============================
八、创建虚拟用户目录
==============================

mkdir -p /srv/ftp/scientistzjf
chown -R ftpvirt:ftpvirt /srv/ftp/scientistzjf

==============================
九、vsftpd 主配置文件
==============================

cp /etc/vsftpd/vsftpd.conf /etc/vsftpd/vsftpd.conf.bak

cat > /etc/vsftpd/vsftpd.conf <<EOF
anonymous_enable=NO
local_enable=YES
write_enable=YES

pam_service_name=vsftpd_virtual

guest_enable=YES
guest_username=ftpvirt
virtual_use_local_privs=YES

user_config_dir=/etc/vsftpd/vuser_conf

chroot_local_user=YES
allow_writeable_chroot=YES

userlist_enable=YES
userlist_deny=NO
userlist_file=/etc/vsftpd.allowed_users

listen=YES
listen_ipv6=NO

pasv_enable=YES
pasv_address=YOUR_IP_ADDR
pasv_min_port=30000
pasv_max_port=30100
pasv_promiscuous=YES

utf8_filesystem=YES

xferlog_enable=YES
vsftpd_log_file=/var/log/vsftpd.log
log_ftp_protocol=YES
EOF

==============================
十、虚拟用户独立配置
==============================

cat > /etc/vsftpd/vuser_conf/scientistzjf <<EOF
local_root=/srv/ftp/scientistzjf
write_enable=YES
EOF

==============================
十一、用户白名单
==============================

echo "scientistzjf" > /etc/vsftpd.allowed_users
chmod 600 /etc/vsftpd.allowed_users

==============================
十二、防火墙放行
==============================

firewall-cmd --permanent --add-service=ftp
firewall-cmd --permanent --add-port=30000-30100/tcp
firewall-cmd --reload

==============================
十三、生成 FTPS（ECC）证书
==============================

openssl ecparam -name secp384r1 -genkey -noout \
-out /etc/vsftpd/vsftpd.key

openssl req -new -x509 \
-key /etc/vsftpd/vsftpd.key \
-out /etc/vsftpd/vsftpd.crt \
-days 36500

==============================
十四、启用 FTPS
==============================

cat >> /etc/vsftpd/vsftpd.conf <<EOF

ssl_enable=YES
force_local_data_ssl=YES
force_local_logins_ssl=YES

rsa_cert_file=/etc/vsftpd/vsftpd.crt
rsa_private_key_file=/etc/vsftpd/vsftpd.key

ssl_ciphers=ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA256:!aNULL:!MD5
ssl_tlsv1=YES
ssl_sslv2=NO
ssl_sslv3=NO

debug_ssl=YES
EOF

==============================
十五、启动 vsftpd
==============================

systemctl enable vsftpd
systemctl restart vsftpd
systemctl status vsftpd --no-pager

# 验证监听 21 端口
ss -lntp | grep :21

# 手动启动排错
/usr/sbin/vsftpd /etc/vsftpd/vsftpd.conf

==============================

🧠 机房实战小提醒

• IP 变了记得改 pasv_address
• FTPS 客户端要选：
  • 协议：FTP over TLS (Explicit)
  • 加密：Require explicit FTP over TLS
• 530 错误 → 90% 是 PAM / 白名单 / SELinux
• 425 错误 → 防火墙 / PASV 端口

Debain旧版本下载地址

假设共享目录是/srv/data/
samba配置文件在/etc/samba/smb.conf

建 Linux 用户（如果还没建）

useradd -m -s /bin/bash scientistzjf
passwd scientistzjf

加 Samba 密码（Windows 连接用这个）

smbpasswd -a scientistzjf
smbpasswd -e scientistzjf

配置文件:

[global]
    workgroup = WORKGROUP
    server string = ZJF Samba
    security = user

    # 用户不存在时映射为匿名
    map to guest = Bad User
    guest account = nobody

    # 日志
    log file = /var/log/samba/log.%m
    max log size = 1000

    # Windows 兼容性
    vfs objects = acl_xattr
    map acl inherit = yes
    store dos attributes = yes

########################################
# 管理员总入口（不影响排序，可选）
########################################
[srv-data]
    comment = Full access for scientistzjf
    path = /srv/data
    browseable = yes
    guest ok = no
    valid users = scientistzjf
    read only = no

    force user = scientistzjf
    force group = scientistzjf
    create mask = 0777
    directory mask = 0777

########################################
# 以下共享名 = 目录名（Windows 排序友好）
########################################

[000-Video]
    path = /srv/data/000-Video
    browseable = yes
    guest ok = yes
    read only = yes

[001-Music]
    path = /srv/data/001-Music
    browseable = yes
    guest ok = yes
    read only = yes

[002-Documents]
    path = /srv/data/002-Documents
    browseable = yes
    guest ok = yes
    read only = yes
    write list = scientistzjf, nobody

[003-E_Books]
    path = /srv/data/003-E_Books
    browseable = yes
    guest ok = yes
    read only = yes

[004-Android_APPs]
    path = /srv/data/004-Android_APPs
    browseable = yes
    guest ok = yes
    read only = yes

[005-Tools]
    path = /srv/data/005-Tools
    browseable = yes
    guest ok = yes
    read only = yes

[006-Downloads]
    path = /srv/data/006-Downloads
    browseable = yes
    guest ok = yes
    read only = yes
    write list = scientistzjf, nobody

检查与重启 Samba

testparm
systemctl restart smbd
systemctl restart nmbd   # 有些系统需要

测试smb连接

smbclient -L localhost -N

前沿的精简系统下载 | ylx系统下载 | 溯汐潮系统下载 | 动感超人系统下载 | Palesys浅色系统下载 | Windows各种精简版下载 | Windows server精简版下载

不忘初心博客 不忘初心系统博客 不忘初心精简版 不忘初心系统官网 不忘初心精简版系统 win windows

window精简系统 : 分享精简作品 可测试、交流 、下载: 极限精简,适度精简,轻量优化,极限优化,速度稳定为先,快速安装，用户自定义安装,精简包、系统清理软件分享

PVE安装OpenWRT的方法

安装PVE虚拟机

下载PVE镜像

https://www.proxmox.com/en/downloads/proxmox-virtual-environment/iso

下载镜像烧录软件

https://etcher.balena.io/#download-etcher

准备一个U盘，并把PVE镜像烧录到U盘

安装PVE虚拟机

※ 把U盘插入计算机（插在后面，别插在HUB）

※ 硬盘磁盘格式化成xfs类型的文件系统

※ 按提示完成安装

进入PVE管理界面

https://YOUR_IP:8006/

安装OpenWRT

下载OpenWRT镜像

https://github.com/firker/openwrt-Exclusive/releases

上传OpenWRT镜像到PVE的ISO镜像

记下上传时镜像的target路径，比如：
/var/lib/vz/template/iso/openwrt-buddha-v2_2024_-x86-64-generic-squashfs-uefi.img

创建一个虚拟网卡

在PVE管理界面的 “节点”→“系统”→“网络”中，点击“创建”按钮，创建一个“Linux Bridge”，并给它一个名字，比如“vmbr1”。

创建一个虚拟机，不需要CD-ROM，其他默认。（假设ID为9000）

导入OpenWRT的镜像成为硬盘，并删除原来的硬盘。

qm importdisk 9000 /var/lib/vz/template/iso/openwrt-buddha-v2_2024_-x86-64-generic-squashfs-uefi.img local-lvm

开机，并配置网络

检查vi /etc/config/network,看看lan和wan是否正确分配给了vmbr1和vmbr0，否则改过来。

重启网络，这时你应该可以看到WAN口IP

/etc/init.d/network restart

ip a
udhcpc -i eth0
ip a show eth0
ip r

关闭OpenWRT系统防火墙

/etc/init.d/firewall stop
/etc/init.d/firewall disable
/etc/init.d/firewall status

关闭后你访问管理页面，没有密码

OpenWrt LuCI 默认是：

http://172.16.101.160/

配置好OpenWrt网络转发，比如

“系统”→“管理权”→“SSH 访问”，指定“接口”的内外网访问。

“网络”→“防火墙”→“端口转发”，映射“OpenWRT管理页面”和“OpenWRT的SSH”。

最后记得 “保存并应用”。恢复防火墙，否则转发规则不会生效。

/etc/init.d/firewall enable
/etc/init.d/firewall start

指定给 某个IP/任何人 访问管理页面

1. 放行 WAN 口的 HTTP 80（仅某个IP）

uci add firewall rule
uci set firewall.@rule[-1].name='Allow-LuCI-HTTP-from-myPC'
uci set firewall.@rule[-1].src='wan'
uci set firewall.@rule[-1].proto='tcp'
uci set firewall.@rule[-1].dest_port='80'
uci set firewall.@rule[-1].src_ip='YOUR_IP'
uci set firewall.@rule[-1].target='ACCEPT'

2. 放行 WAN 口的 HTTPS 443（仅某个IP）

   uci add firewall rule
   uci set firewall.@rule[-1].name='Allow-LuCI-HTTPS-from-myPC'
   uci set firewall.@rule[-1].src='wan'
   uci set firewall.@rule[-1].proto='tcp'
   uci set firewall.@rule[-1].dest_port='443'
   uci set firewall.@rule[-1].src_ip='YOUR_IP'
   uci set firewall.@rule[-1].target='ACCEPT'

3. 放行 WAN 口的 SSH 22（仅某个IP）

   uci add firewall rule
   uci set firewall.@rule[-1].name='Allow-LuCI-HTTPS-from-myPC'
   uci set firewall.@rule[-1].src='wan'
   uci set firewall.@rule[-1].proto='tcp'
   uci set firewall.@rule[-1].dest_port='22'
   uci set firewall.@rule[-1].src_ip='YOUR_IP'
   uci set firewall.@rule[-1].target='ACCEPT'

4. 放行 WAN 口指定IP（所有人）

uci add firewall rule
uci set firewall.@rule[-1].name='Allow-LuCI-HTTP-WAN'
uci set firewall.@rule[-1].src='wan'
uci set firewall.@rule[-1].proto='tcp'
uci set firewall.@rule[-1].dest_port='80'
uci set firewall.@rule[-1].target='ACCEPT'

uci add firewall rule
uci set firewall.@rule[-1].name='Allow-LuCI-HTTPS-WAN'
uci set firewall.@rule[-1].src='wan'
uci set firewall.@rule[-1].proto='tcp'
uci set firewall.@rule[-1].dest_port='443'
uci set firewall.@rule[-1].target='ACCEPT'

添加完成后，重启防火墙：

uci commit firewall
/etc/init.d/firewall restart

检查是否已生效（可选）

uci show firewall | grep LuCI

规则怎么删除？

在 OpenWrt shell 执行：

uci show firewall | grep Allow-LuCI

你会看到类似输出（举例）：

firewall.@rule[7].name='Allow-LuCI-HTTP-from-ZJF'
firewall.@rule[8].name='Allow-LuCI-HTTPS-from-ZJF'

这里的 [7]、[8] 就是规则编号。

按编号删除规则：

uci delete firewall.@rule[7]
uci delete firewall.@rule[8]

保存并应用

uci commit firewall
/etc/init.d/firewall restart

规则都在这里：

vi /etc/config/firewall

扩大OpenWRT的镜像的磁盘大小（不会破坏已有内容）（可选）

qemu-img info /var/lib/vz/template/iso/openwrt-buddha-v2_2024_-x86-64-generic-squashfs-uefi.img
qemu-img resize /var/lib/vz/template/iso/openwrt-buddha-v2_2024_-x86-64-generic-squashfs-uefi.img 2G

最后想“容量真的能用上”，通常还需要在 OpenWrt 里做：

检查当前分区布局

进入 OpenWrt 的 shell，使用 fdisk 或 lsblk 来查看当前分区表。

fdisk -l
lsblk -f
blkid

/dev/sda2 是 squashfs，这是根文件系统，它是只读的。

/dev/loop0 是 f2fs，这是一个可写文件系统，通常作为 overlay 文件系统使用，挂载在 /tmp/extroot/overlay 和 /overlay 上。

扩展 f2fs 文件系统

安装 f2fs-tools（如果没有安装的话）

opkg update
opkg install f2fs-tools

然后，使用 resize.f2fs 来扩展文件系统：

resize.f2fs /dev/loop0

扩展后，使用 df -h 或 lsblk -f 命令确认新的空间已经被成功识别并且分配给了 /overlay

前言一直对软路由这个东西念念不忘，想要入手折腾一下。最近因为家里需要一台服务器，我就把我的 n1 拿回了家里，转手就入了一个 j3455 的成品软路由，这边文章记录下在 pve 环境下折腾 openwrt 的心得，顺便学习下 pve（说不定能当个 IDC 呢

VSFTP配置（虚拟用户版）

非加密FTP

修改系统默认语言为中文

sudo dpkg-reconfigure locales
在弹出的配置界面中，选择 zh_CN.UTF-8 和 en_US.UTF-8，然后将 zh_CN.UTF-8 设置为默认语言。

同步时间

timedatectl list-timezones | grep Shanghai
sudo timedatectl set-timezone Asia/Shanghai
date
sudo apt install openntpd
sudo systemctl status openntpd
timedatectl status

安装依赖工具

sudo apt install -y vsftpd db-util

创建vsftpd专用目录

mkdir -p /etc/vsftpd/

创建ftp用户

sudo useradd -r -d /srv/ftp -s /usr/sbin/nologin ftpvirt
sudo mkdir -p /srv/ftp
sudo chown -R ftpvirt:ftpvirt /srv/ftp

sudo mkdir -p /etc/vsftpd/vuser_conf
sudo mkdir -p /srv/ftp/scientistzjf
sudo chown -R ftpvirt:ftpvirt /srv/ftp/scientistzjf

创建虚拟用户的用户名和密码，并转换成db数据

# virt_users.txt每两行一组
sudo tee /etc/vsftpd/virt_users.txt > /dev/null <<'EOF'
YOUR_USERNAME
YOUR_PASSWORD
EOF

sudo db_load -T -t hash -f /etc/vsftpd/virt_users.txt /etc/vsftpd/virt_users.db
sudo chmod 600 /etc/vsftpd/virt_users.*

将用户数据导入PAM中

sudo tee /etc/pam.d/vsftpd_virtual > /dev/null <<'EOF'
auth required pam_userdb.so db=/etc/vsftpd/virt_users
account required pam_userdb.so db=/etc/vsftpd/virt_users
EOF

创建日志文件

touch /var/log/vsftpd.log
chmod 600 /var/log/vsftpd.log

编辑/etc/vsftpd.conf配置文件

# 禁止匿名
anonymous_enable=NO

# 允许非匿名登录（虚拟用户也算“非匿名”，必须开）
local_enable=YES

# 允许写
write_enable=YES

# PAM 指向我们刚建的虚拟用户认证
pam_service_name=vsftpd_virtual

# 启用 guest 映射：所有虚拟用户映射为 ftpvirt
guest_enable=YES
guest_username=ftpvirt

# 让虚拟用户拥有本地用户权限（否则像匿名一样限制多）
virtual_use_local_privs=YES

# 每个虚拟用户独立配置（非常好用）
user_config_dir=/etc/vsftpd/vuser_conf

# 建议启用（按需）
chroot_local_user=YES
allow_writeable_chroot=YES

userlist_enable=YES
userlist_deny=NO
userlist_file=/etc/vsftpd.allowed_users

# 独立监听模式
listen_ipv6=NO
listen=YES

# Bad IP connecting解决方法
pasv_address=YOUR_IP_ADDR
pasv_promiscuous=YES

pasv_enable=YES
pasv_min_port=30000
pasv_max_port=30100

# 启用 utf8 支持
utf8_filesystem=YES

给vsftpd独立用户创建配置

sudo tee /etc/vsftpd/vuser_conf/scientistzjf > /dev/null <<'EOF'
local_root=/srv/ftp/scientistzjf
write_enable=YES
EOF

#此处local_root=/srv/ftp/scientistzjf是该用户的根目录，一定要给与ftp用户目录权限(ftpvirt:ftpvirt)

给vsftpd配置白名单（防止服务器本地用户登录）

echo "scientistzjf" | sudo tee /etc/vsftpd.allowed_users
sudo chmod 600 /etc/vsftpd.allowed_users

注意，vsftpd.conf中应该要有以下配置：

userlist_enable=YES
userlist_deny=NO
userlist_file=/etc/vsftpd.allowed_users

重启VSFTPD服务

sudo systemctl restart vsftpd
sudo systemctl status vsftpd --no-pager
sudo systemctl enable vsftpd

验证是否真的在监听 21 端口

sudo ss -lntp | grep ':21'

远程测试命令

telnet YOUR_IP_ADDR 21

使用加密FTPS

检查 OpenSSL 是否支持椭圆曲线加密（ECC）

openssl ecparam -list_curves
如果显示了椭圆曲线（如 prime256v1, secp384r1 等），说明你的 OpenSSL 已启用椭圆曲线支持。

生成椭圆曲线密钥（ECDSA）

openssl ecparam -name secp384r1 -genkey -noout -out /etc/vsftpd/vsftpd.key
openssl req -new -x509 -key /etc/vsftpd/vsftpd.key -out /etc/vsftpd/vsftpd.crt -days 36500

生成普通RSA加密（可选）

sudo openssl req -x509 -newkey rsa:2048 -keyout /etc/vsftpd/vsftpd.key -out /etc/vsftpd/vsftpd.crt -days 36500 -nodes

编辑/etc/vsftpd.conf配置文件，添加SSL信息

// ...之前的配置

# 启用 SSL 支持
ssl_enable=YES

# 仅使用 SSL 加密传输（两个都是YES则只用FTPS，两个都是NO则FTP和FTPS都可用）
force_local_data_ssl=YES
force_local_logins_ssl=YES

# 证书文件路径
rsa_cert_file=/etc/vsftpd/vsftpd.crt
rsa_private_key_file=/etc/vsftpd/vsftpd.key

# 允许客户端使用 SSL 协议
ssl_ciphers=ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA256:!aNULL:!MD5
ssl_tlsv1=YES
ssl_sslv3=NO
ssl_sslv2=NO

# 启用日志记录，用于排查问题
xferlog_enable=YES
vsftpd_log_file=/var/log/vsftpd.log

# 启用 FTP 协议级日志记录（帮助排查 SSL 握手问题）
log_ftp_protocol=YES
# 平时 debug_ssl=NO，出问题再临时开
debug_ssl=YES

重启VSFTPD服务

sudo systemctl restart vsftpd
sudo systemctl status vsftpd --no-pager
sudo systemctl enable vsftpd

手动启动 vsftpd，查看错误日志

sudo /usr/sbin/vsftpd /etc/vsftpd.conf

vsftpd.conf 选项速查手册（中文整理版）

1. 文件与语法

• 默认配置文件路径通常为：/etc/vsftpd.conf
  （有些发行版会放在 /etc/vsftpd/vsftpd.conf，以你的系统为准）
• vsftpd 启动时也可以通过命令行参数指定配置文件路径。
• 基本语法：

注释行以 # 开头

配置行格式：option=value

option 与 = 与 value 之间不能有空格（有空格可能会被当成错误）

2. 布尔选项（YES/NO）

2.1 匿名/访客与权限

anonymous_enable

• 作用：是否允许匿名登录（用户名 anonymous 或 ftp）
• 默认：YES
• 常用：

公共下载站：YES

只允许账号登录：NO

no_anon_password

• 作用：匿名登录时不要求输入密码（直接登录）
• 默认：NO

anon_world_readable_only

• 作用：匿名用户只能下载“全局可读”(world-readable) 文件
• 默认：YES

anon_upload_enable

• 作用：允许匿名用户上传文件
• 依赖：write_enable=YES 且匿名用户对目标目录有写权限
• 默认：NO
• 备注：虚拟用户默认也按“匿名权限模型”处理时，上传也常需要这个开关。

anon_mkdir_write_enable

• 作用：允许匿名用户创建目录
• 依赖：write_enable=YES
• 默认：NO

anon_other_write_enable

• 作用：允许匿名用户执行“除上传/建目录以外”的写操作（删除、重命名等）
• 默认：NO
• 安全建议：一般不推荐打开

2.2 本地用户、虚拟用户与 chroot

local_enable

• 作用：是否允许本地系统用户登录（/etc/passwd 或 PAM）
• 默认：NO
• 重要：任何非匿名登录（包括虚拟用户）要能用，通常都需要 local_enable=YES。

write_enable

• 作用：是否允许执行会修改文件系统的 FTP 命令
  包括：STOR, DELE, RNFR, RNTO, MKD, RMD, APPE, SITE
• 默认：NO

chroot_local_user

• 作用：将本地用户登录后“限制在其家目录（chroot 牢笼）内”
• 默认：NO
• 提醒：启用后能提升隔离性，但要注意：

用户若可写入 chroot 根目录，可能触发安全限制或需要额外配置（如 allow_writeable_chroot 在某些版本/发行版存在）

不同发行版补丁策略不同

chroot_list_enable

• 作用：启用 chroot 用户名单机制（配合 chroot_list_file）
• 默认：NO
• 语义：

若 chroot_local_user=NO：名单中的用户会被 chroot

若 chroot_local_user=YES：名单中的用户 不会被 chroot（例外名单）

passwd_chroot_enable

• 作用：允许在 /etc/passwd 的 home 字段里用 /. 指定 chroot 位置
  示例：/data/ftp/. 形式表示 chroot 到某位置
• 默认：NO
• 备注：属于高级玩法，谨慎使用

guest_enable

• 作用：把所有“非匿名登录”都当作访客（guest）登录，并映射到 guest_username
• 默认：NO
• 典型用途：虚拟用户（PAM + guest 映射）

virtual_use_local_privs

• 作用：让虚拟用户使用“本地用户权限模型”而非“匿名权限模型”
• 默认：NO
• 说明：虚拟用户默认权限更像匿名（更受限）；要让虚拟用户像本地用户一样可写，通常要开这个。

2.3 SSL/TLS 相关

仅在 ssl_enable=YES 时相关的选项，才会生效。

ssl_enable

• 作用：启用 FTPS（基于 OpenSSL）
• 默认：NO

allow_anon_ssl

• 作用：允许匿名用户使用 SSL/TLS
• 默认：NO

force_anon_logins_ssl / force_anon_data_ssl

• 作用：强制匿名用户在登录/数据连接上使用 SSL/TLS
• 默认：NO

force_local_logins_ssl / force_local_data_ssl

• 作用：强制本地用户在登录/数据连接上使用 SSL/TLS
• 默认：通常为 YES（不少发行版如此）
• 备注：若你只跑明文 FTP，需要显式关掉它们。

ssl_sslv2 / ssl_sslv3 / ssl_tlsv1

• 作用：允许哪些协议版本
• 默认：sslv2=NO sslv3=NO tlsv1=YES
• 建议：现代环境应禁用 SSLv2/SSLv3。

require_ssl_reuse

• 作用：要求 SSL 数据连接复用控制连接的 SSL 会话（更安全）
• 默认：YES
• 兼容性：有些客户端会被它“搞坏”，遇到连接/传输异常可尝试设为 NO

require_cert

• 作用：强制客户端提供证书（双向认证）
• 默认：NO

ssl_request_cert

• 作用：请求客户端证书（但不强制，除非 require_cert=YES）
• 默认：YES

validate_cert

• 作用：要求客户端证书验证通过（自签通常不算通过）
• 默认：NO

debug_ssl

• 作用：把 OpenSSL 连接诊断写进日志（排错用）
• 默认：NO

strict_ssl_read_eof / strict_ssl_write_shutdown

• 作用：更严格地判断 SSL 传输结束方式（更安全/更严格）
• 默认：NO
• 兼容性：很多客户端不支持，通常保持默认

implicit_ssl

• 作用：启用“隐式 FTPS”（一上来就握手 SSL）
• 默认：NO
• 提醒：现代多用“显式 FTPS”（AUTH TLS），隐式通常需要独立监听端口。

2.4 连接模式与安全检查

pasv_enable

• 作用：允许被动模式（PASV）
• 默认：YES

port_enable

• 作用：允许主动模式（PORT）
• 默认：YES

pasv_promiscuous

• 作用：禁用 PASV 的“数据连接 IP 必须与控制连接 IP 相同”的检查
• 默认：NO
• 风险：安全性降低，一般不要开（除非你明确知道用途，比如某些隧道/特殊网络）

port_promiscuous

• 作用：禁用 PORT 的“数据连接只能连回客户端”的检查
• 默认：NO
• 风险：同上，不推荐

connect_from_port_20

• 作用：主动(PORT)模式的数据连接是否强制从服务器端口 20 发起
• 默认：NO（示例配置里常会设成 YES）
• 备注：开启会需要更多特权，可能影响安全/部署灵活性

2.5 日志与调试

xferlog_enable

• 作用：记录上传/下载传输日志
• 默认：NO

xferlog_std_format

• 作用：使用传统 wu-ftpd 风格的 xferlog 格式
• 默认：NO

dual_log_enable

• 作用：同时写两份日志：/var/log/xferlog + /var/log/vsftpd.log
• 默认：NO

log_ftp_protocol

• 作用：记录所有 FTP 命令/响应（协议级调试）
• 默认：NO

syslog_enable

• 作用：把 vsftpd 日志写入系统日志（syslog），而不是文件
• 默认：NO

2.6 运行方式/隔离

listen

• 作用：独立运行模式（不通过 inetd）
• 默认：NO

listen_ipv6

• 作用：监听 IPv6（与 listen 互斥）
• 默认：NO

background

• 作用：独立模式启动时是否后台运行
• 默认：YES

run_as_launching_user

• 作用：以启动 vsftpd 的用户身份运行（非 root）
• 默认：NO
• 严重提醒：会导致很多特权功能不可用（chroot/低端口等），风险和限制很大，除非你非常清楚。

isolate_network

• 作用：用 Linux namespace（CLONE_NEWNET）隔离不受信任进程网络
• 默认：YES

isolate

• 作用：用 PID/IPC namespace（CLONE_NEWPID/NEWIPC）隔离进程
• 默认：YES

2.7 其他常见布尔项

dirlist_enable

• 作用：是否允许列目录（LIST/NLST 等）
• 默认：YES

download_enable

• 作用：是否允许下载（RETR 等）
• 默认：YES

dirmessage_enable

• 作用：进入目录时显示消息文件（如 .message）
• 默认：NO（示例文件常开）

message_file

• 关联字符串选项，默认 .message

force_dot_files

• 作用：即使客户端不加 -a，也显示以 . 开头的文件/目录（不包括 ./..）
• 默认：NO

ls_recurse_enable

• 作用：允许 ls -R 递归列目录
• 默认：NO
• 风险：可能造成性能/资源问题

async_abor_enable

• 作用：启用异步 ABOR（某些客户端取消传输会用）
• 默认：NO

chmod_enable

• 作用：允许本地用户使用 SITE CHMOD
• 默认：YES

hide_ids

• 作用：目录列表中把用户/组显示为 ftp
• 默认：NO

text_userdb_names

• 作用：列表中显示用户名而不是数字 UID/GID
• 默认：NO

reverse_lookup_enable

• 作用：PAM 认证前做反向 DNS（IP->主机名）
• 默认：YES
• 若 DNS 慢导致登录慢，可设 NO

tcp_wrappers

• 作用：启用 TCP Wrappers（hosts.allow/deny + 按IP加载配置）
• 默认：NO

session_support

• 作用：维护会话（utmp/wtmp + pam_session）
• 默认：NO

setproctitle_enable

• 作用：在进程列表里显示会话状态（idle/download…）
• 默认：NO

no_log_lock

• 作用：写日志时不加文件锁（解决极少数文件系统挂起）
• 默认：NO

lock_upload_files

• 作用：上传加写锁、下载加共享读锁
• 默认：YES

mdtm_write

• 作用：允许 MDTM 修改文件时间（受权限检查）
• 默认：YES

delete_failed_uploads

• 作用：上传失败时删除不完整文件
• 默认：NO

deny_email_enable

• 作用：匿名密码（常被用作 email）黑名单机制
• 默认：NO

secure_email_list_enable

• 作用：只允许匿名登录使用“白名单密码”(每行一个)
• 默认：NO

check_shell

• 作用：检查 /etc/shells 里是否是合法 shell（仅非 PAM 版本相关）
• 默认：YES

use_localtime

• 作用：目录列表显示本地时区时间（默认 GMT）
• 默认：NO

use_sendfile

• 作用：内部性能相关（sendfile）
• 默认：YES

tilde_user_enable

• 作用：解析 ~user/path 这种路径
• 默认：NO

3. 数字选项（非负整数，部分可用八进制）

注意：涉及 umask 的选项常用八进制，记得加前导 0，如 077。

3.1 超时与限制

accept_timeout

• 作用：PASV 数据连接等待客户端连接的超时（秒）
• 默认：60

connect_timeout

• 作用：PORT 数据连接等待客户端响应的超时（秒）
• 默认：60

data_connection_timeout

• 作用：数据传输无进展的超时（秒）
• 默认：300

idle_session_timeout

• 作用：控制连接空闲超时（秒）
• 默认：300

max_login_fails

• 作用：连续登录失败次数达到后断开
• 默认：3

max_clients

• 作用：独立模式下最大并发客户端数（0=不限制）
• 默认：2000

max_per_ip

• 作用：同一 IP 最大并发连接数（0=不限制）
• 默认：50

3.2 速率限制

anon_max_rate

• 作用：匿名用户最大传输速率（字节/秒，0=不限）
• 默认：0

local_max_rate

• 作用：本地用户最大传输速率（字节/秒，0=不限）
• 默认：0

3.3 被动端口与其他

listen_port

• 作用：独立模式监听端口
• 默认：21

pasv_min_port / pasv_max_port

• 作用：PASV 数据连接端口范围（便于防火墙放行）
• 默认：0（表示任意端口）

ftp_data_port

• 作用：PORT 模式数据连接默认端口（通常 20）
• 默认：20

file_open_mode

• 作用：上传文件创建时的基础权限（再叠加 umask）
• 默认：0666

local_umask / anon_umask

• 作用：本地/匿名用户创建文件的 umask
• 默认：077

delay_failed_login

• 作用：登录失败前延迟（秒）
• 默认：1

delay_successful_login

• 作用：成功登录前延迟（秒）
• 默认：0

trans_chunk_size

• 作用：内部传输块大小（可影响限速平滑性）
• 默认：0（自动选择）

chown_upload_mode

• 作用：匿名上传且 chown 后强制的文件模式
• 默认：0600

4. 字符串选项

4.1 目录与根目录

anon_root

• 作用：匿名登录后的根目录（chdir 到这里）
• 默认：空

local_root

• 作用：本地用户登录后的根目录（chdir 到这里）
• 默认：空
• 常用：配合 chroot_local_user=YES 做用户目录限制

secure_chroot_dir

• 作用：vsftpd 需要无权限运行时使用的“安全空目录”
• 默认：/usr/share/empty
• 要求：该目录必须存在，且普通 ftp 用户不可写

4.2 用户列表 / 每用户配置

userlist_file

• 作用：userlist 名单文件路径
• 默认：/etc/vsftpd/user_list

userlist_enable

• 作用：启用 userlist 机制（会读取 userlist_file）
• 默认：NO

userlist_deny

• 作用：配合 userlist_enable 使用：

YES：名单里的人 拒绝登录（黑名单）

NO：名单里的人 允许登录（白名单）

• 默认：YES

userlist_log

• 作用：记录 userlist 拒绝登录事件
• 默认：NO

user_config_dir

• 作用：按用户覆盖配置（登录用户为 chris 时加载 .../chris）
• 默认：空
• 注意：并非所有选项都能“按用户生效”，有些必须在会话开始前确定。

user_sub_token

• 作用：模板变量替换，常用于虚拟用户目录生成
  例如 local_root=/home/virtual/$USER
• 默认：空

4.3 Banner / 消息 / 隐藏与拒绝

ftpd_banner

• 作用：连接时显示的欢迎横幅字符串
• 默认：空（显示默认横幅）

banner_file

• 作用：从文件读取横幅内容（覆盖 ftpd_banner）
• 默认：空

message_file

• 作用：目录消息文件名（配合 dirmessage_enable）
• 默认：.message

hide_file

• 作用：目录列表中隐藏匹配的文件名模式（但知道名字仍可访问）
• 默认：空

deny_file

• 作用：拒绝访问匹配的文件/目录（不隐藏，直接拒绝操作）
• 默认：空
• 说明：这是“轻量策略”，严肃访问控制应优先依赖文件系统权限。

4.4 PAM 与用户映射

pam_service_name

• 作用：vsftpd 使用的 PAM 服务名
• 默认：ftp

guest_username

• 作用：访客(guest)登录映射到的真实系统用户
• 默认：ftp

ftp_username

• 作用：匿名 FTP 使用的本地用户（其 home 通常是匿名根目录）
• 默认：ftp

4.5 监听地址

listen_address

• 作用：独立模式下绑定监听的 IPv4 地址（不填则所有接口）
• 默认：空

listen_address6

• 作用：独立模式下绑定监听的 IPv6 地址
• 默认：空

4.6 PASV 公网地址

pasv_address

• 作用：PASV 模式向客户端“宣告”的 IP 地址（NAT/公网时常用）
• 默认：空（默认取控制连接的本地地址）

pasv_addr_resolve

• 作用：若 pasv_address 填的是主机名，是否在启动时解析
• 默认：NO

4.7 SSL 证书与加密套件

rsa_cert_file

• 作用：RSA 证书文件路径
• 默认：/usr/share/ssl/certs/vsftpd.pem（发行版可能不同）

rsa_private_key_file

• 作用：RSA 私钥文件路径（不填通常与 cert 同文件）
• 默认：空

dsa_cert_file / dsa_private_key_file

• 作用：DSA 证书/私钥路径（现在较少用）
• 默认：空

ca_certs_file

• 作用：CA 证书链文件（用于验证客户端证书）
• 默认：空

ssl_ciphers

• 作用：允许的 SSL/TLS 加密套件
• 默认：DES-CBC3-SHA（历史默认；现代建议配置更强套件）

4.8 日志文件路径

vsftpd_log_file

• 作用：vsftpd 风格日志文件路径
• 默认：/var/log/vsftpd.log

xferlog_file

• 作用：wu-ftpd 风格传输日志文件路径
• 默认：/var/log/xferlog

5. 常见组合示例（便于你自己搜）

5.1 禁用匿名、只允许本地用户

anonymous_enable=NO
local_enable=YES

5.2 允许写入（上传/删除/改名等）

write_enable=YES

5.3 把用户限制在目录（chroot）

chroot_local_user=YES

5.4 只允许名单用户登录（白名单）

userlist_enable=YES
userlist_deny=NO
userlist_file=/etc/vsftpd.userlist

5.5 PASV 端口范围（防火墙/NAT 常用）

pasv_enable=YES
pasv_min_port=10090
pasv_max_port=10100

7z a /root/backup_name.7z /DevelopZone -xr\!target -xr\!node_modules -mmt12 -mx9 -p123 -mhe=on -y

Debain 12 如何升级到 Debian 13

确认当前版本

lsb_release -a

更新 Debian 12 到最新状态

sudo apt update
sudo apt upgrade
sudo apt full-upgrade
sudo reboot

修改软件源（核心步骤）

sudo nano /etc/apt/sources.list

把所有的：bookworm 全部替换为：trixie

重点

Debian 12 之后把 non-free-firmware 单独拆出来了，一定要保留
第三方源（Docker、Node、CUDA、国内镜像）建议先注释掉

示例（标准官方源）：

deb https://deb.debian.org/debian trixie main contrib non-free non-free-firmware
deb https://deb.debian.org/debian trixie-updates main contrib non-free non-free-firmware
deb https://security.debian.org/debian-security trixie-security main contrib non-free non-free-firmware

刷新软件索引

sudo apt update

如有提示 release info changed，输入 Y

最小升级（防止大规模冲突）

sudo apt upgrade --without-new-pkgs

完整升级

sudo apt full-upgrade

过程中注意：

配置文件询问：
服务器建议选 keep local version

重启

sudo reboot

确认系统版本

lsb_release -a

应显示：Debian GNU/Linux 13 (trixie)

清理旧包

sudo apt --purge autoremove
sudo apt clean

升级失败 / 依赖冲突

sudo apt -f install
sudo dpkg --configure -a

修改直达（复制到浏览器地址栏打开）：
chrome://net-internals/#hsts

前提：服务端支持http，不支持的情况无法处理

打开chrome浏览器：

1.地址栏输入：chrome://net-internals/#hsts

2.找到标题：Delete domain security policies

3.在Domain输入框中输入信息，如：test.com, 点击Delete

4.地址栏重新输入地址，如：http://test.com

KingbaseES简介文档中心
https://docs.kingbase.com.cn/cn/KES-V9R1C10/introduction

对标APEX的快速开发与运维平台
https://bbs.kingbase.com.cn/documentGuide?recId=6b134ad01e599577b9f4e5de59d181f6

首先确保你有合适的内核版本，通常需要使用 4.9 及以上的内核版本来支持 BBR。以下是开启 BBR 的步骤：

1. 确认系统内核版本

首先，确认你的内核版本。如果内核版本低于 4.9，你需要升级内核。如果内核版本是 4.9 或更高版本，则可以直接进入下一步。

uname -r

如果你的内核版本低于 4.9，可以升级内核。可以通过安装最新的内核来确保支持 BBR：

sudo apt update
sudo apt install linux-image-amd64

然后重启系统并检查内核版本：

reboot
uname -r

2. 启用 BBR

BBR 是一个 TCP 拥塞控制算法，可以通过配置内核模块来启用它。按照以下步骤启用：

1) 加载 BBR 模块

使用以下命令加载 BBR 模块：

echo "tcp_bbr" | sudo tee -a /etc/modules-load.d/modules.conf

2) 设置 TCP 默认队列

打开 /etc/sysctl.conf 文件，添加配置：

echo "net.core.default_qdisc=fq" | sudo tee -a /etc/sysctl.conf
echo "net.ipv4.tcp_congestion_control=bbr" | sudo tee -a /etc/sysctl.conf

3) 应用 sysctl 配置

应用更改的配置：

sudo sysctl -p

4) 验证 BBR 是否启用

检查 BBR 是否启用，可以运行以下命令：

sysctl net.ipv4.tcp_congestion_control

如果输出是 bbr，则表示 BBR 已成功启用。

sysctl net.ipv4.tcp_available_congestion_control

如果输出包含 bbr，说明你的系统支持并已启用 BBR。

3. 重启系统

为了确保所有更改生效，可以重启系统：

sudo reboot

4. 验证内核和 BBR 状态

重启后，再次使用以下命令验证内核版本和 BBR 状态：

uname -r
sysctl net.ipv4.tcp_congestion_control

总结

以上步骤适用于 Debian 12 和 Debian 13，通过更新内核（如果需要），并启用 BBR，可以提升网络性能，尤其是在高带宽、低延迟的网络环境下。

微信开发者平台文档

2025年11月24日 ChatGPT对话记录

User 1

html的meta标签是否能让页面知道用户是用的电脑端还是移动设备端？

GPT 1

HTML的<meta>标签本身并不能直接让页面知道用户是用的电脑端还是移动设备端。<meta>标签主要用于提供页面的元数据，如字符编码、页面描述、关键词等信息。

然而，可以通过其他方法判断用户的设备类型，比如使用JavaScript中的window.navigator.userAgent来检测用户的设备类型。以下是一个常见的方式：

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
    // 用户使用的是移动设备
} else {
    // 用户使用的是电脑端
}

除了这种方式，你也可以使用CSS媒体查询（Media Queries）来根据设备的特性（如屏幕尺寸、分辨率等）来调整样式，从而实现响应式设计：

@media only screen and (max-width: 768px) {
    /* 移动设备的样式 */
}

@media only screen and (min-width: 769px) {
    /* 电脑端的样式 */
}

总结：<meta>标签无法判断设备类型，通常是通过JavaScript或CSS媒体查询来实现这一目的。

User 2

那如果我这个app有两个ui，一个是电脑端ui用的flowbite-vue，一个移动端用的vant，我要怎么做才能让app正常在设备上显示呢？

GPT 2

为了确保你的App根据不同设备（电脑端和移动端）正常显示并使用相应的UI框架（flowbite-vue用于电脑端，vant用于移动端），你可以使用响应式设计和设备检测来动态加载不同的UI框架。

以下是实现这一目标的几种常见方法：

1. 使用CSS媒体查询来控制UI框架的显示

你可以使用CSS媒体查询来为不同设备加载不同的UI框架。例如，针对移动设备显示vant，针对桌面端显示flowbite-vue。这样，你可以控制每个UI框架的显示，而不需要做复杂的JavaScript判断。

步骤：

• 为电脑端和移动端分别设置特定的CSS类。
• 使用媒体查询来决定哪一部分UI框架应该显示。

/* 默认加载桌面端UI */
.desktop-ui {
    display: block;
}
.mobile-ui {
    display: none;
}

/* 当屏幕宽度小于某个值时，显示移动端UI */
@media (max-width: 768px) {
    .desktop-ui {
        display: none;
    }
    .mobile-ui {
        display: block;
    }
}

在HTML中，你可以根据设备宽度来加载不同的UI组件：

2. 使用JavaScript动态判断设备类型

你可以通过JavaScript判断用户设备是移动端还是电脑端，然后动态加载相应的UI框架。这通常涉及到检查userAgent来判断设备类型。

步骤：

• 检测用户的设备类型。
• 根据设备类型动态加载flowbite-vue或vant。

import { createApp } from 'vue';
import FlowbiteVue from 'flowbite-vue';
import Vant from 'vant';

const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent);

let app = createApp(App);

// 根据设备动态加载UI框架
if (isMobile) {
  // 使用 vant UI框架
  app.use(Vant);
} else {
  // 使用 flowbite-vue UI框架
  app.use(FlowbiteVue);
}

app.mount('#app');

3. 使用Vue的动态组件加载

如果你在Vue中使用不同的UI框架，可以利用Vue的动态组件来实现条件渲染，只有在满足特定条件时才加载相应的UI组件。

步骤：

• 判断设备类型。
• 动态渲染对应的UI框架组件。

import VantComponent from 'vant'; // 假设这是Vant组件
import FlowbiteComponent from 'flowbite-vue'; // 假设这是Flowbite-Vue组件

export default {
  data() {
    return {
      isMobile: /Mobi|Android|iPhone/i.test(navigator.userAgent), // 判断设备类型
    };
  },
  components: {
    VantComponent,
    FlowbiteComponent,
  },
};

4. Vue项目的动态样式加载

你可以根据设备类型动态加载不同的样式文件，确保不同的UI框架使用不同的样式表。

步骤：

• 根据设备类型动态切换样式。
• 配置webpack或vite来支持不同环境的样式加载。

if (isMobile) {
  import('vant/dist/vant.css');
} else {
  import('flowbite-vue/dist/flowbite.css');
}

5. 结合使用Vue Router来区分不同设备的UI

如果需要更细粒度的控制（例如不同的页面有不同的UI框架），你可以根据设备加载不同的路由和视图组件。

总结

根据你提供的需求，推荐的方法是通过设备检测判断是加载vant（移动端）还是flowbite-vue（电脑端）。你可以结合使用CSS媒体查询、JavaScript的设备判断和Vue的动态组件渲染来确保不同设备显示合适的UI框架。这样不仅能确保用户体验良好，也能有效地加载对应的UI组件。

User 3

这么多种方法，对于一个新项目来说，用哪种方法区别最好？

GPT 3

对于一个新项目来说，选择合适的方法取决于项目的复杂性、可扩展性以及未来维护的便利性。以下是我根据不同场景对这几种方法的评估和建议：

推荐方法：使用设备检测与动态加载框架（JavaScript 判断）

这是一种灵活且易于管理的方法，适用于绝大多数新项目，尤其是当你希望根据设备动态选择UI框架时。通过 navigator.userAgent 判断设备类型并动态加载框架，可以确保在运行时为用户加载最适合他们设备的UI，而无需重复加载不必要的资源。这样做具有以下优势：

优势：

1. 清晰的逻辑：通过 JavaScript 判断设备类型，加载相应的UI框架，代码清晰且容易维护。
2. 灵活性高：未来如果需要调整UI框架或引入其他框架时，可以通过更改判断条件或动态加载逻辑来进行扩展。
3. 性能优化：只会加载设备需要的UI框架，避免了不必要的资源浪费，提升了应用性能。

示例代码（Vue 3）：

import { createApp } from 'vue';
import FlowbiteVue from 'flowbite-vue';
import Vant from 'vant';

const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent); // 判断设备

let app = createApp(App);

// 根据设备类型动态加载UI框架
if (isMobile) {
  app.use(Vant); // 移动端使用 vant
} else {
  app.use(FlowbiteVue); // 电脑端使用 flowbite-vue
}

app.mount('#app');

为什么推荐：

• 简洁和可扩展性强：随着项目的增长，你可能会添加新的UI框架或切换设备判定条件，这种方法在灵活性上具有优势。
• 适用于大多数项目：无论是一个小型项目还是大型应用，动态加载UI框架的策略都能够平衡性能与用户体验。

其他方法的考虑：

1. CSS媒体查询：

• 适用场景：如果你只需要通过改变样式来区分设备（例如，完全不同的布局），而不需要使用不同的UI组件或框架，可以考虑这种方法。

• 缺点：这种方法通常只适用于布局调整，不能轻松处理需要不同框架和组件的复杂需求。

  2. Vue的动态组件加载：

• 适用场景：当你的UI框架非常复杂，需要在不同条件下加载不同的组件时，这种方法会很有帮助。

• 缺点：管理动态组件可能增加代码复杂性。如果你只是简单地区分UI框架，这种方法可能会显得过于复杂。

  3. Vue Router 来区分UI：

• 适用场景：如果你希望根据设备加载不同的页面和视图，可以使用这种方法。

• 缺点：这种方法的实现稍显繁琐，通常用于复杂的路由管理和页面结构调整，不适用于简单的UI框架切换。

总结：

对于一个新项目，使用设备检测与动态加载框架的方法（JavaScript判断） 是最推荐的方式。它简单、灵活、可扩展，且容易与其他逻辑结合，适应不同的需求。同时，你可以通过动态加载框架和组件来优化性能，避免加载不必要的资源。

User 4

if (isMobile) {
app.use(Vant); // 移动端使用 vant
} else {
app.use(FlowbiteVue); // 电脑端使用 flowbite-vue
}

这里app.use了不同的组件，那么我开发的时候是不是也要有不同的vue文件？

GPT 4

是的，使用不同的UI框架（如Vant和FlowbiteVue）时，通常你会有不同的Vue文件或至少是不同的组件，尤其是在UI差异较大的情况下。具体来说：

1. 不同UI框架时的文件结构管理

当你为移动端和电脑端加载不同的UI框架时，通常你会根据设备的不同来决定加载不同的组件，或者在同一个Vue文件中动态切换不同的UI组件。你可以根据具体需求选择一种方法：

方案1：不同的Vue文件

在这种情况下，你可以为电脑端和移动端分别创建不同的Vue文件或组件。例如：

• Desktop.vue：专门为电脑端设计，使用flowbite-vue组件。
• Mobile.vue：专门为移动端设计，使用vant组件。

然后，在主应用中根据设备类型动态加载对应的文件：

import { createApp } from 'vue';
import Desktop from './components/Desktop.vue';
import Mobile from './components/Mobile.vue';

const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent);

const app = createApp(isMobile ? Mobile : Desktop);
app.mount('#app');

方案2：同一个Vue文件中根据设备动态切换组件

如果你不希望为每个设备类型创建不同的Vue文件，也可以在同一个Vue文件中通过条件渲染动态选择组件。例如，使用v-if来切换组件：

import DesktopUI from './components/DesktopUI.vue';
import MobileUI from './components/MobileUI.vue';

export default {
  data() {
    return {
      isMobile: /Mobi|Android|iPhone/i.test(navigator.userAgent),
    };
  },
  components: {
    DesktopUI,
    MobileUI,
  },
};

这样，在同一个组件文件中，你可以根据设备类型渲染不同的UI部分。

2. UI框架组件的切换

如果只是一些小的UI差异，比如按钮的样式、布局的调整等，你可以通过动态导入组件来加载Vant和FlowbiteVue的组件。例如：

    Desktop Button
    Mobile Button

import { Button as VanButton } from 'vant';

export default {
  data() {
    return {
      isMobile: /Mobi|Android|iPhone/i.test(navigator.userAgent),
    };
  },
  components: {
    VanButton, // 只在移动端加载
  },
};

这种方法避免了重复加载整个UI框架，只在需要时加载相应的组件，优化了性能。

3. 使用动态导入（异步组件加载）

如果你想在不同设备下异步加载不同的UI框架，Vue支持动态导入组件，这样只有在需要的时候才会加载相应的框架：

const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent);

const app = createApp(App);

// 动态导入UI框架组件
if (isMobile) {
  import('vant').then((vant) => {
    app.use(vant);
  });
} else {
  import('flowbite-vue').then((flowbiteVue) => {
    app.use(flowbiteVue);
  });
}

app.mount('#app');

总结：

• 如果UI差异较大，建议为不同的设备（电脑端和移动端）使用不同的Vue文件或组件（方案1）。
• 如果UI差异较小，可以通过条件渲染或动态导入的方式来控制不同组件的加载，避免文件过多（方案2和方案3）。

这种方式可以使项目的结构更加清晰，并且有利于后期的维护与扩展。如果UI差异很大，推荐创建不同的Vue文件；如果只是样式或小的交互差异，使用条件渲染或者动态组件会更加高效。

咱们直接从 0 开始，一步一步把 Vue 3 + Rsbuild + Tailwind 4 搭起来，并顺便写个小页面练习一下。

一、准备环境（只做一次）

1. Node 版本
   建议：Node 20+（Rsbuild 与很多新工具都推荐用新 LTS）。GitHub

• 用 node -v 看一下版本，不够的话去 node 官网装个 20 LTS。

2. 包管理器
   你熟悉啥用啥就行：npm / pnpm / yarn。
   下面我用 pnpm 和 npm 都写出来，你挑一种照着敲。

二、用 Rsbuild 初始化 Vue 3 项目

1. 创建工程

在终端里到你想放项目的目录，执行：

# 用 pnpm
pnpm create rsbuild@latest

# 或者用 npm
npm create rsbuild@latest

随后会出现一堆交互式问题（大概是这样的）：Rsbuild

• Project name: rsbuild-vue-tailwind-demo（随便起）
• Select framework: 选 Vue 3
• Language: 看你习惯，TypeScript 或 JavaScript 都可以

脚手架跑完之后，进入目录安装依赖：

cd rsbuild-vue-tailwind-demo

# 任选其一
pnpm install
# or
npm install

2. 运行开发环境

pnpm dev
# or
npm run dev

浏览器打开提示的地址（一般是 http://localhost:3000），能看到一个 Vue 3 的 hello 页面，就说明：

✅ Rsbuild + Vue 3 基本 OK 了

💡 背后发生了什么？
脚手架已经帮你：

• 安装了 @rsbuild/core
• 安装并启用了 @rsbuild/plugin-vue，让 Rsbuild 能编译 .vue 单文件组件Rsbuild+2极客大学+2

你可以打开 rsbuild.config.ts 看看，大概会有类似：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
});

三、集成 Tailwind CSS 4

接下来我们在这个项目里接入 Tailwind CSS v4，按 Rsbuild 官方推荐方式走。Rsbuild+1

注意：Tailwind 4 必须用 .css 文件，不能放到 scss/less/stylus 里。Rsbuild

第 1 步：安装依赖

在项目根目录运行：

# pnpm
pnpm add -D tailwindcss @tailwindcss/postcss

# 或 npm
npm install -D tailwindcss @tailwindcss/postcss

第 2 步：配置 PostCSS

在项目根目录新建文件：postcss.config.mjs：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

这一步就是告诉 Rsbuild：

“构建 CSS 的时候，请把 Tailwind 4 的 PostCSS 插件串进去。”Rsbuild

第 3 步：创建 Tailwind 入口 CSS

在 src 目录下新建 index.css（名字随便，但要统一）：

/* src/index.css */
@import "tailwindcss";

/* 你也可以加点全局样式，比如： */
body {
  @apply bg-slate-100 text-slate-900;
}

Tailwind 4 不再用 @tailwind base/components/utilities，而是直接 @import "tailwindcss"。Rsbuild+1

第 4 步：在入口文件引入 CSS

打开 src/main.ts（或 main.js），确认里头有类似：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css'; //  把刚才的 Tailwind 入口文件引进来

createApp(App).mount('#root');

如果没有，就自己加上一行 import './index.css';。

第 5 步：跑一下验证

重新启动 / 刷新 dev：

pnpm dev
# or
npm run dev

然后在 App.vue 里随便写一段带 Tailwind class 的 DOM，看是否生效。

例如改成：

<template>
  <main class="min-h-screen flex items-center justify-center">
    <section class="bg-white shadow-xl rounded-2xl p-8 max-w-md w-full">
      <h1 class="text-3xl font-bold mb-4 text-slate-900">
        Hello Rsbuild + Vue 3 + Tailwind 4 👋
      </h1>
      <p class="text-slate-600">
        如果你看到的是一个白色卡片 + 阴影 + 居中布局，
        说明 Tailwind 4 已经接好了。
      </p>
    </section>
  </main>
</template>

能看到样式就说明：

✅ Vue 3 + Rsbuild + Tailwind 4 组合已经跑通。

四、做一个小练习：组件 + 状态 + Tailwind 布局

既然你是练习，我们顺便再写一个简单的交互组件，熟悉一下这一套栈的开发体验。

继续编辑 App.vue：

<script setup>
import { ref } from 'vue';

const count = ref(0);

const cards = [
  { id: 1, title: '快速开发', desc: 'Rsbuild 提供极速构建和热更新体验。' },
  { id: 2, title: 'Vue 3 组合式 API', desc: '更好的类型推导与逻辑复用。' },
  { id: 3, title: 'Tailwind 4', desc: '实用类 + 新配置方式，更简单。' },
];
</script>

<template>
  <main class="min-h-screen bg-slate-100 flex items-center justify-center px-4">
    <section class="w-full max-w-3xl space-y-6">
      <!-- 顶部标题 + 计数器 -->
      <header
        class="bg-white rounded-2xl shadow-md px-6 py-4 flex items-center justify-between"
      >
        <div>
          <h1 class="text-2xl font-bold text-slate-900">
            Vue 3 + Rsbuild + Tailwind 4 练习
          </h1>
          <p class="text-sm text-slate-500 mt-1">
            尝试修改这个页面，多写几个组件和样式。
          </p>
        </div>

        <div class="flex items-center gap-3">
          <span class="text-sm text-slate-500">点击次数</span>
          <span class="text-2xl font-semibold text-blue-600 tabular-nums">
            {{ count }}
          </span>
          <button
            class="inline-flex items-center justify-center rounded-xl px-4 py-2
                     text-sm font-medium bg-blue-600 text-white
                     hover:bg-blue-700 active:scale-95
                     transition duration-150 ease-out"
            @click="count++"
          >
            点我 +
          </button>
        </div>
      </header>

      <!-- 卡片列表 -->
      <section class="grid gap-4 md:grid-cols-3">
        <article
          v-for="card in cards"
          :key="card.id"
          class="bg-white rounded-2xl shadow-sm p-4 border border-slate-100
                 hover:shadow-md hover:-translate-y-0.5 transition"
        >
          <h2 class="text-base font-semibold text-slate-900 mb-2">
            {{ card.title }}
          </h2>
          <p class="text-sm text-slate-600">
            {{ card.desc }}
          </p>
        </article>
      </section>
    </section>
  </main>
</template>

这个小 demo 会让你体验到：

• 组合式 API（ref、<script setup>）
• Tailwind 4 的布局类（flex、grid、shadow 等）
• Rsbuild 的 dev 体验（改一行马上刷新 / HMR）

五、接下来可以怎么系统练习？

你可以照这个顺序往下玩：

1. 再做两个页面 + 路由

• 装 vue-router，做 /dashboard、/settings 之类的小后台。

2. 抽几个基础组件

• Button、Card、Modal，用 Tailwind 把常用样式封装一下。

3. 体验构建速度

• 随便多加点页面、依赖，然后跑 pnpm build / npm run build 感受一下。

一个 Vue 3 + Rsbuild 项目，同时用 Tailwind 做布局，用 Vant 4 做移动端 UI 组件，跑在手机浏览器里的 H5。

一、简单版：在现有项目里装上 Vant 4

这里假设你已经有：Vue 3 + Rsbuild + Tailwind 4 项目，并且是 JS 版本。
没有 TS 也没关系，Vant 对 JS 完全兼容。

1. 安装 Vant

在你的项目根目录（有 package.json 的地方）运行：

# pnpm（你之前用这个就继续用）
pnpm add vant

# 或者 npm
npm install vant

Vant 官方推荐的 Vue3 安装方式就是这样：npm i vant。

2. 在入口 main.js 里注册 Vant 组件

打开 src/main.js，大致会是这样：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css'; // 你的 Tailwind 入口

我们先用“全局注册 + 全量样式”的最简单写法：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';

// ① 引入 Vant 所有样式
import 'vant/lib/index.css';
// ② 按需引入你要用的组件（先来几个常见的）
import { Button, Cell, CellGroup } from 'vant';

const app = createApp(App);

// ③ 全局注册这些组件
app.use(Button);
app.use(Cell);
app.use(CellGroup);

app.mount('#root');

先不用管“按需 css”这些优化，能跑起来最重要，后面再精细化。

3. 在 App.vue 里用上 Vant 组件（配合 Tailwind）

我们写一个完全偏移动端布局的小首页，替换你现在的 App.vue 内容就行：

<script setup>
import { ref } from 'vue';

const visitCount = ref(0);

const menus = [
  { id: 1, title: '订单管理', desc: '查看和管理用户订单' },
  { id: 2, title: '商品管理', desc: '维护商品信息和库存' },
  { id: 3, title: '用户管理', desc: '查看用户数据与行为' },
];
</script>

<template>
  <!-- 整个页面居中，适配手机宽度 -->
  <main class="min-h-screen bg-slate-100 flex justify-center px-4 py-6">
    <!-- 限制最大宽度为 480，手机上刚好一屏 -->
    <section class="w-full max-w-md space-y-4">
      <!-- 顶部：统计卡片 + Vant 按钮 -->
      <div class="bg-white rounded-2xl shadow-md p-4">
        <h1 class="text-xl font-bold mb-1">
          移动端控制台
        </h1>
        <p class="text-xs text-slate-500 mb-4">
          Vue 3 + Rsbuild + Tailwind 4 + Vant 4
        </p>

        <div class="flex items-center justify-between">
          <div>
            <p class="text-xs text-slate-400">今日访问</p>
            <p class="text-2xl font-semibold tabular-nums">
              {{ visitCount }}
            </p>
          </div>

          <!-- 这里是 Vant 的按钮组件 -->
          <van-button type="primary" @click="visitCount++">
            点我 +
          </van-button>
        </div>
      </div>

      <!-- 下方：Vant 的 Cell 列表 -->
      <van-cell-group inset title="功能">
        <van-cell
          v-for="item in menus"
          :key="item.id"
          :title="item.title"
          :label="item.desc"
          is-link
        />
      </van-cell-group>
    </section>
  </main>
</template>

只要前面的 main.js 注册好了 Button、Cell、CellGroup，这段就能正常跑起来。

4. 确认一下移动端 meta（很重要）

在 Rsbuild 生成的 index.html（或 public/index.html）里，确保 <head> 里面有这一句：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

没有的话自己加上，这样手机浏览器打开的时候，才会按手机宽度去布局，而不是当成 PC 页面。

到这一步，你已经有了：

• ✅ Vue 3 + Rsbuild + Tailwind 4
• ✅ Vant 4 组件可以正常使用
• ✅ 页面在手机浏览器里看起来就是标准的 H5 风格

二、进阶版：自动按需引入（写 <van-button> 就能用）

上面那种方式，每次要用新组件都要：

• import { Button } from 'vant'
• app.use(Button)

有点烦。
Vant 官方提供了一个专门的解析器：@vant/auto-import-resolver，配合 unplugin-vue-components 就能做到：

你在模板里写 <van-button>，它自动帮你 import + 注册 + 引入样式。

1. 安装按需引入相关依赖

在你项目根目录执行：

# pnpm
pnpm add -D @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import

# 或 npm
npm install -D @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import

@vant/auto-import-resolver 官方说明里有这些依赖的组合，并且明确支持 Rspack / Rsbuild。

2. 在 Rsbuild 里配置 unplugin（关键）

我们要利用 Rsbuild 对 Rspack 插件的支持，在 rsbuild.config.mjs（或 .js）里挂上这两个 unplugin。
Rsbuild 文档里已经给了 unplugin-vue-components/rspack 的示例。

如果你用的是 ESM 配置（比如 rsbuild.config.mjs）

// rsbuild.config.mjs
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

// 关键：用 rspack 版本的 unplugin
import Components from 'unplugin-vue-components/rspack';
import AutoImport from 'unplugin-auto-import/rspack';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [
        // 自动导入 Vue API（ref、computed 等）
        AutoImport({
          imports: ['vue'],
          resolvers: [VantResolver()],
          // dts 可以关掉，你是 JS 项目就无所谓了
          dts: false,
        }),
        // 自动导入组件（van-button / van-cell 等）
        Components({
          resolvers: [VantResolver()],
          dts: false,
        }),
      ],
    },
  },
});

如果你用的是 CommonJS 配置（比如 rsbuild.config.js）

// rsbuild.config.js
const { defineConfig } = require('@rsbuild/core');
const { pluginVue } = require('@rsbuild/plugin-vue');

const Components = require('unplugin-vue-components/rspack');
const AutoImport = require('unplugin-auto-import/rspack');
const { VantResolver } = require('@vant/auto-import-resolver');

module.exports = defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [
        AutoImport({
          imports: ['vue'],
          resolvers: [VantResolver()],
          dts: false,
        }),
        Components({
          resolvers: [VantResolver()],
          dts: false,
        }),
      ],
    },
  },
});

这段配置的意思是：

• 扫描你的 .vue 文件
• 看到 <van-button> / showToast 等
• 自动加上对应的 import 和样式引入，打包时做按需。

3. 改回“什么都不手动导入”的 main.js

有了自动导入之后，你可以把之前 main.js 里这些删掉：

// ❌ 这些可以删了
// import 'vant/lib/index.css';
// import { Button, Cell, CellGroup } from 'vant';
// app.use(Button);
// app.use(Cell);
// app.use(CellGroup);

只保留最基础的部分：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';

createApp(App).mount('#root');

然后在 .vue 里你继续愉快地写：

<van-button type="primary">确定</van-button>
<van-cell-group>
  <van-cell title="xxx" />
</van-cell-group>

不需要再想着“我是不是忘记 import 什么组件了”。

三、下一步可以怎么玩？

你现在这套栈已经非常适合做 手机端后台 / H5 落地页 / 轻量 App 了。
下一步可以往这几个方向练习：

1. 加上 vue-router

• /login、/home、/settings 之类的路由
• 顶部用 Vant 的 <van-tabbar> 做底部导航

2. 加个状态管理（Pinia）

• 存 token、用户信息
• 不同页面之间共享

3. 做一个完整的“手机端管理控制台骨架”

• 登录页（Vant Form + Field）
• Layout（顶部标题 + 主列表 + Tabbar）
• 1～2 个业务页面（比如订单列表 + 详情）