上传逻辑必须放在 npm run build 成功且 dist 目录生成后执行,推荐在 package.json 中配置 "build:upload": "npm run build && node scripts/upload.js";上传脚本需用 path.relative() 剥离 dist 前缀、统一使用 unix 斜杠、按各云厂商 sdk 要求传参,并注意权限、认证、超时及静态托管配置。

打包后自动触发上传逻辑要放在哪一步
必须在 npm run build 成功完成、dist 目录已生成之后执行上传,不能提前。很多脚本在 build 还没结束就去读 dist,结果报 ENOENT: no such file or directory。
推荐做法是修改 package.json 的 scripts:
"scripts": {
"build": "vue-cli-service build",
"build:upload": "npm run build && node scripts/upload.js"
}
这样能确保顺序可靠;如果用 && 失败时整个链路中断,比写成异步等待更可控。
上传脚本里怎么处理文件路径和 CDN 前缀
上传前必须把本地路径转为云存储中期望的相对路径,否则文件会堆在根目录或路径错乱。常见错误是直接传 dist/js/app.1234.js,但 COS/BOS/七牛实际需要的是 js/app.1234.js 这样的结构。
- 用
path.relative()剥离dist前缀:path.relative(path.resolve(__dirname, '../dist'), fullpath) - 上传到腾讯云 COS 时,
cloudPath参数必须是 Unix 风格斜杠(/),Windows 下的\会导致 403 或 404 - 如果项目用了
publicPath(比如设为https://cdn.example.com/),上传脚本无需再拼域名,只管传文件;后续 HTML 中的src和href由构建工具自动替换
不同云厂商 SDK 的关键参数差异
腾讯云 COS、百度云 BOS、七牛、华为 AGC 的 Node SDK 接口相似但不兼容,不能一套代码到处跑。最常踩坑的是认证方式和区域配置:
- 腾讯云 COS:
SecretId/SecretKey+Region(如ap-beijing),必须匹配存储桶所在地域,否则AccessDenied - 百度云 BOS:
endpoint必须带协议和区域(如https://bj.bcebos.com),ak/sk是明文,不能混淆成密钥对 ID - 七牛:
accessKey/secretKey+bucket+domain,上传前需先调qiniu.util.generateUploadToken()获取临时 token - 华为 AGC:要用
@huaweicloud/sdk-core+@huaweicloud/obs-nodejs-sdk,且region必须是短码(如cn-north-4)
上传失败时如何快速定位问题
不要只看 console.log 或静默失败。真实环境里常见断点在:
-
fs.readdirSync报EPERM:说明脚本没权限读dist,尤其 Windows 上可能被杀毒软件拦截 - SDK 报
InvalidAccessKeyId或SignatureDoesNotMatch:90% 是SecretKey复制漏了末尾换行或空格,建议用process.env.SECRET_KEY.trim() - 上传后文件 404:检查云控制台中存储桶的「静态网站托管」是否开启,以及「访问权限」是否设为「公有读」
- 大文件上传超时:BOS 默认 timeout 是 60s,上传 >50MB 文件需显式设置
timeout: 300000
真正麻烦的不是上传本身,而是路径映射和权限链路上任何一个环节出错,都会导致资源加载失败但控制台无明显报错——得盯着 Network 面板看 404 请求的实际 URL 才能反推问题在哪。











