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

Vue CLI 2 是一个强大的命令行工具，用于快速搭建 Vue.js 项目。它提供了一整套脚手架，包括配置管理、热重载、代码分割等特性，极大地提高了开发效率。在 Windows 操作系统下，我们可以利用 Vue CLI 2 的功能来实现项目的自动化部署到 Ubuntu 服务器。 要确保你已经安装了 Node.js 和 Vue CLI 2。通过运行 `npm install -g @vue/cli` 安装 Vue CLI 全局。然后创建一个新的 Vue 项目，例如 `vue create vue-deploy-template`，进入项目目录并安装必要的依赖： ```bash cd vue-deploy-template npm install ``` 在项目中，我们需要配置打包过程。Vue CLI 2 使用 webpack 配置文件 `vue.config.js`，在此文件中，你可以定义打包输出路径，例如： ```javascript module.exports = { outputDir: 'dist', // 输出目录 productionSourceMap: false, // 生产环境关闭源码映射 }; ``` 接下来，为了让项目在 Ubuntu 服务器上运行，确保你的应用不依赖于 Node.js 环境，可以使用 `static` 目录来放置所有静态资源。在 `vue.config.js` 文件中添加 `publicPath` 配置： ```javascript module.exports = { publicPath: '/', // 使资源路径从根目录开始 ... }; ``` 现在，运行 `npm run build` 来生成项目打包文件。Vue CLI 会将所有内容打包到 `dist` 目录中，准备好部署到服务器。 为了在 Windows 环境下部署到 Ubuntu 服务器，你需要一个支持 SFTP 协议的工具，如 WinSCP。安装并配置 WinSCP，连接到你的 Ubuntu 服务器。创建一个脚本，例如 `deploy.sh`，来自动处理文件上传和服务器端的文件移动： ```bash #!/bin/bash cd /path/to/dist winscp.com /command "open sftp://username:password@yourserverip/" "put -delete * /var/www/html" "exit" ``` 替换 `username`, `password` 和 `yourserverip` 为实际值。确保脚本有执行权限：`chmod +x deploy.sh`。 在 Windows 中，你可以使用 `winrs` 命令或批处理文件来执行这个脚本。例如，创建一个名为 `deploy.bat` 的批处理文件： ```batch @echo off cd /d %~dp0 /path/to/deploy.sh pause ``` 运行这个批处理文件，Windows 将通过 WinSCP 将 `dist` 目录中的内容上传到 Ubuntu 服务器，并替换服务器上的旧文件。 总结一下，本文主要介绍了如何在 Windows 环境下，使用 Vue CLI 2 创建的项目，通过配置 `vue.config.js` 文件、打包生成的 `dist` 目录、WinSCP 脚本以及 Windows 批处理文件，实现一键部署到 Ubuntu 服务器的过程。这种方法简化了开发和部署流程，让开发者能更专注于应用本身的功能开发。