如何快速部署vue项目

前言

做为一个前端开发工程师，完成了自己的vue项目之后当然就是希望可以部署到服务器上，然后公网访问自己做的项目，但是在实际的开发工作中这部分的工作往往是由运维或者后端来完成的，所以很多前端不知道怎么部署vue项目到服务器，下面这篇文章就是会介绍几种简单的部署vue前端项目到服务器上的方式。

一、前端打包方式

vue项目想要部署到服务器上，首先不可避免的就是需要将我们的vue项目进行打包构建，将vue的代码编译打包成一个完整的前端项目，下面就是几种常见的打包方式

1.1 本地打包上传

我们可以通过在本地打包的方式，将打包后的文件直接通过filezilla（或者其他ssh工具）将打包后的文件传递到服务器上的指定文件夹下面：

// package.json
// 我这里是使用了vite进行打包，你也可以直接使用vue的打包指令
  "scripts": {
    "build": "vite build",
  },
//执行指令
npm run build

我们就可以在我们配置的打包路径下看的这个dist文件夹，这个就是打包之后的文件。

然后将文件使用工具传到服务器上。

1.2 脚本执行打包

首先我们可以通过代码管理工具将源码导入到服务器上（一般我们在开发过程中都会使用svn或者git进行代码的版本控制，我们可以利用这些工具将源码检出到服务器上），这里我就以svn为例子进行实践操作，代码提交到svn之后，执行下面的脚本进行打包：
记得提前在服务器上安装好node环境和vite环境（非必须）。

#!/bin/sh
export LANG=zh_CN.UTF-8
# svn的安装执行路径
SVN=/usr/bin/svn 
# 你需要检出源码的路径
WEB=/project/demo
$SVN update $WEB --username 你的svn用户名--password 你的svn用户密码 &&