在VPS上使用symlink部署Vue.js项目执行npm run build报错如何解决

1. 修正操作顺序 #

你执行操作的逻辑完全颠倒：软链接需要指向已经存在的构建产物目录，正确的顺序应该是先执行build生成dist文件夹，再创建软链接，而不是先建软链接再build。
另外注意你描述的克隆路径和实际执行命令的路径不匹配：你描述中克隆到/var/www/repo-generated，但报错中你执行npm run build的工作目录是/var/www/dh-payroll-frontend，请先确认你操作的是正确的项目目录。

2. 修复构建路径配置错误 #

报错ENOENT: no such file or directory, stat '/var/www/dh-payroll-frontend/public/dist'说明你项目的构建输出路径配置有误：

• 检查项目根目录下的vue.config.js（如果是vue-cli 2旧版本也可能是config/index.js）文件，找到outputDir配置项
• 默认配置下该值应为dist，代表构建产物输出到项目根目录的dist文件夹，如果你误写为public/dist就会触发该报错
• 如果你确实需要输出到public/dist目录，请先手动在public目录下创建dist文件夹，再执行build命令：

mkdir -p /var/www/你的实际项目目录/public/dist

3. 重新执行正确操作流程 #

修正配置后按以下顺序执行：

• 进入你的项目根目录：

cd /var/www/你的实际项目目录 # 注意替换为你实际的克隆目录，要么是repo-generated要么是dh-payroll-frontend

• 执行构建命令，确认dist文件夹正常生成：

npm run build

• 构建成功后，删除之前创建的无效软链接，重新创建正确的软链接：

# 先删除旧的死链
rm -rf /var/www/html
# 重新创建软链接，注意替换为你实际的dist路径
ln -s /var/www/你的实际项目目录/dist /var/www/html

• 最后设置正确的目录权限，避免HTTP服务无法访问文件：

chown -R apache:apache /var/www/你的实际项目目录/dist # 如果用的是Nginx就替换为nginx:nginx
chmod -R 755 /var/www/你的实际项目目录/dist

内容的提问来源于stack exchange，提问作者Bin Ski.