阿里云平台Vue项目打包发布

### 打包 Vue 项目 为了将 Vue 项目部署至阿里云服务器，首先需确保本地开发环境中的 Vue 项目能够正常构建。通过命令行工具执行 `npm run build` 或者 `yarn build` 命令可以触发项目的打包过程[^4]。 ```bash npm run build ``` 上述命令将会依据配置自动编译源码，并优化资源以便于生产环境中使用，最终生成的静态文件会被放置在一个名为 `dist/` 的目录内，该目录包含了用于上线发布的全部必要文件，如 HTML 文件、JavaScript 文件以及其他静态资产等。 ### 将打包好的 Vue 应用上传到远程服务器 #### 准备工作 - 使用 FinalShell 等 SSH 工具连接已购入的 CentOS 系统下的阿里云实例[^1]。 - 开启必要的网络端口，在安全组设置里允许外部访问 Web 服务所需的 HTTP (80) 及 HTTPS (443) 协议对应的默认端口号；如果应用监听的是其他自定义端口也应相应放开这些端口[^2]。 #### 部署流程 一旦完成了以上准备工作之后，就可以着手准备传输之前提到过的 `dist/` 文件夹了： 一种常见的方式是借助 Git 版本控制系统或是 SCP/SFTP 来实现文件同步操作。对于小型站点来说，直接利用 FTP 客户端亦可满足需求。不过更推荐的做法是在目标机器上安装 Node.js 并全局装设 pm2 进程管理器来启动单页应用程序(SPA)，从而简化运维管理工作流[^5]。 另一种方式则是采用 Nginx 作为反向代理服务器来提供静态页面加载支持。具体做法如下所示： 编辑 `/etc/nginx/conf.d/default.conf` 添加如下内容以适配实际应用场景的需求: ```nginx server { listen 80; server_name your_domain.com; location / { root /path/to/dist; # 替换成你自己的路径 index index.html index.htm; try_files $uri $uri/ /index.html; } } ``` 最后一步就是重启 Nginx 让更改生效: ```bash sudo systemctl restart nginx ``` 此时应该就能顺利浏览由 Vue 构建出来的前端界面啦！