Vue项目通过Travis CI部署至Surge.sh失败问题求助

兄弟，我之前也碰到过一模一样的坑！手动部署顺顺当当，一用Travis CI就掉链子，核心原因其实很简单——Travis不会自动帮你执行构建命令生成dist文件夹，咱们一步步把它搞定：

1. 补全Travis配置里的构建步骤 #

你现有的配置只执行了npm install安装依赖，但完全没触发项目的构建流程。webpack-simple模板的package.json里默认自带了build脚本，所以必须在Travis配置里加上这个关键步骤：

language: node_js
node_js:
  - "node"
  - "7"
cache:
  directories:
    - node_modules/
    # 建议先去掉dist/的缓存，避免旧缓存干扰部署，等流程稳定后再考虑添加
install:
  - npm install
# 新增script阶段，执行构建生成dist文件夹
script:
  - npm run build
after_success:
  # 务必指定dist目录作为Surge的部署源
  - surge ./dist --domain your-project-name.surge.sh

2. 确认Surge部署命令的准确性 #

手动部署时你肯定先跑了npm run build生成dist，再用surge dist/完成部署，但Travis里必须明确写清./dist这个部署目录——不然Surge会默认部署项目根目录的文件，而根目录里根本没有你需要的静态资源。

3. 配置Travis环境变量（别硬写敏感信息！） #

千万别把Surge的token和域名直接写在配置文件里，去Travis CI的项目设置页面，添加两个环境变量：

• SURGE_TOKEN：你的Surge账户token（本地可以通过surge token命令获取）
• SURGE_DOMAIN：你要部署的目标域名（比如my-cool-vue-app.surge.sh）

然后把after_success里的命令改成更安全的写法：

after_success:
  - surge ./dist --domain $SURGE_DOMAIN --token $SURGE_TOKEN

4. 额外避坑提醒 #

• 别担心.gitignore里加了dist/，Travis会在CI环境里重新构建生成dist，完全不需要把dist推到GitHub；
• 如果之前给dist开了缓存，建议先去Travis项目页面的「More options」里清空缓存，避免旧的空dist文件夹干扰新的部署。

这么调整之后，Travis就会按「安装依赖→构建生成dist→部署dist内容」的流程走，和你手动部署的逻辑完全一致，网站就能正常访问啦！

内容的提问来源于stack exchange，提问作者Andre Sion