如何自动部署简单的 Vue WebApp（不需要服务器）？ （即带有 vue 的简单构建链）

Posted 2023-02-22

【中文标题】如何自动部署简单的 Vue WebApp（不需要服务器）？ （即带有 vue 的简单构建链）

【英文标题】：How to automate deploy of simple Vue WebApp (no server required)? (i.e. simple build chain with vue)

【发布时间】：2019-12-12 08:40:49

【问题描述】：

我编写了一个小型 Vue 应用程序，并一直在寻找一种自动化部署的好方法，即调用 lint -> 测试 -> 构建 -> 上传到某个网络空间（阶段和/或生产）（sftp）。基本上是一个简单的 CI/CD 管道。

我查看了诸如 grunt（似乎有点 outdated 和文档对我没有多大帮助）和 gulp（另见 this answer）之类的任务运行器，并且还考虑定义一个 npm 脚本。 Jenkins 等 CI 工具似乎有点过大，需要设置一些工作。

npm 脚本可能是最简单的解决方案，尤其是因为我可以简单地链接 lint / test / build：

  "scripts": 
    "build": "vue-cli-service build --modern",
    "lint": "vue-cli-service lint",
    "prettier": "prettier --write src/**/*.ts,js,vue,css,less,scss,html,json,md public/**/*.ts,js,vue,css,less,scss,html,json,md test/**/*.js,vue,css,less,scss,html,json,md build/*.js",
    "deploy": "# ...?",
    "pipeline": "yarn lint && yarn prettier && yarn test && yarn build && yarn deploy"
  ,

但是，对于将构建部署到我的 Web 服务器的简单方法，我还没有好主意。对于 grunt，我发现了一些可能适合的任务（grunt-rsync，grunt-sftp-deploy）。但现在 grunt 似乎不是首选。

有人有什么建议或建议吗？

附加信息：我使用的是 Windows，我不想在 github 上发布我的源代码（在这种情况下）。

【参考方案1】：

部署静态站点的最简单方法是使用 pages.github.com - 只需将您的构建推送到 github 存储库中。

另一个简单（超级简单）服务是netlify - 只需使用npm install netlify-cli -g 安装它。 Details in docs

但如果你需要更好的 CI 不需要搜索“vue deploy”，你需要来自 github、bitbucket、gitlab 等的任何 CI 服务。例如 - easy introduction by circleci

---

回到您的问题 - 您使用的是 linux/mac 还是 windows？ 在 linux 上非常简单，只需使用scp from/local/dir to@remote/dir 之类的命令即可。在 Windows 上，您可能应该尝试一些 nodejs 替代方案，例如来自this answer的 sn-p

【讨论】：

感谢您的快速回答，我在上面扩展了我的问题：我使用的是 Windows，我不想在 github 上发布我的源代码（在这种情况下）。我会看看 netlify 和提到的答案。

如果您不想要，您可能不会在 github 或任何地方部署源代码。您始终可以只推送 dist （或任何您的构建文件夹命名），并在根目录中使用缩小的构建和 index.html。之后，对于 github，您需要设置 > Click on the Settings tab and scroll down to the GitHub Pages section. > Then select the master branch source and click on the Save button.