基于 vue-cli 2 实现，window环境下支持项目一键部署到 Ubuntu 服务器

Vue CLI 2 是一个强大的 Vue.js 应用程序脚手架工具，用于快速搭建、配置和构建项目。在本文中，我们将深入探讨如何在 Windows 操作系统环境下，使用 Vue CLI 2 实现项目的自动化部署到 Ubuntu 服务器。此外，我们还将讨论如何通过 WinSCP 脚本来简化这一过程。 确保你已经安装了 Node.js 和 Vue CLI 2。要安装 Vue CLI 2，可以在命令行中输入以下命令： ```bash npm install -g @vue/cli@2.x ``` 创建一个新的 Vue 项目，使用以下命令： ```bash vue create my-project ``` 进入项目目录并运行项目，以验证其正常工作： ```bash cd my-project npm run serve ``` 接下来，我们需要为部署做准备。在 `package.json` 文件中，添加以下两个脚本，分别用于构建生产环境的项目和生成 zip 包： ```json "scripts": { "build:prod": "vue-cli-service build --mode production", "zip": "cd dist && zip -r ../my-project-build.zip * && cd .." } ``` 现在，可以执行 `npm run build:prod` 构建生产环境的项目，然后运行 `npm run zip` 来生成包含所有部署文件的 zip 包。 为了在 Windows 环境下实现一键部署，我们将使用 WinSCP，它是一个支持 SFTP（SSH 文件传输协议）的文件传输工具。你需要在 WinSCP 官网上下载并安装该软件。 创建一个名为 `winscp-deploy.xml` 的文件，配置 WinSCP 会话，包括服务器的主机名、用户名、密码和路径。例如： ```xml <site host="your-server-hostname" user="your-username" password="your-password"> <path remote="/path/to/deployment/directory" localdir="dist"/> </site> ``` 接下来，编写一个批处理脚本（例如：`deploy.bat`），用于调用 WinSCP 并将 zip 文件上传到服务器，然后解压并删除本地的 zip 文件： ```batch winscp.com /command "open winscp-deploy.xml" "put my-project-build.zip" "unzip my-project-build.zip" "rm my-project-build.zip" "exit" ``` 确保你的 Ubuntu 服务器上已经安装了 `unzip` 命令。如果没有，可以通过 `sudo apt-get install unzip` 来安装。现在，你可以双击 `deploy.bat` 执行部署脚本，项目将被自动部署到 Ubuntu 服务器。 这个流程简化了 Vue 项目在 Windows 环境下的部署，通过 Vue CLI 2 的构建功能、WinSCP 的自动化脚本以及 Ubuntu 服务器上的 `unzip` 命令，实现了项目的一键部署。同时，你还可以根据实际需求自定义部署脚本，以适应更复杂的部署场景。通过这种方式，开发者可以更加专注于代码开发，而无需过多地关注部署细节。