浅谈vue项目如何打包扔向服务器

Vue项目的打包和部署过程是一个比较复杂和重要的环节，本文将给出一些关于如何把Vue项目打包并放在服务器上部署的完整攻略。

1. 打包Vue项目

Vue项目需要先打包成一个静态文件，这个文件包含了所有打包后的HTML、CSS、JavaScript等资源文件。我们可以使用 Vue CLI来进行打包，Vue CLI 是 Vue.js 生态系统中的一个脚手架工具，它能够帮助我们简单快捷的创建 Vue 项目，并提供了打包等功能，可以充分的提高我们的开发效率。

1）安装Vue CLI

Vue CLI是一个基于Node.js的命令行工具，我们需要先安装Node.js。安装Node.js后，我们可以使用 npm 命令来安装 Vue CLI。

npm install -g vue-cli

2）创建项目

使用 Vue CLI 创建Vue项目有两种方式：

a. 使用模板创建项目

Vue CLI 提供了多种基于官方的模板 (webpack, webpack-simple, browserify, browserify-simple, simple, pwa) 快速初始化一个新项目。

vue init webpack my-project

b. 使用可视化创建项目

npm install -g @vue/cli-service-global
vue create my-project

3）部署到服务器

完成了 Vue 项目的开发和构建工作后，就需要将打包后的静态文件扔向得到服务器，供用户访问。

a. 通过FTP上传

这是一种比较常用的方式，先把打包后的文件用FTP上传到远程服务器，再通过远程服务器的文件管理器访问。

1. 通过 FTP 工具新建一个连接，配置相关参数：

地址：FTP服务器地址
端口：FTP服务器端口
用户名：FTP服务器用户名
密码：FTP服务器密码

1. 找到想要上传的文件或文件夹。

2. 选中上传的文件或文件夹，右击上传。

b. 通过Git上传

1. 在服务器端创建一个 Git 仓库。

2. 将打包后的文件通过 Git 提交到仓库中。

3. 在服务器上拉取仓库的代码。

4. 打开浏览器，访问 Web 服务器对应的地址，即可访问 Vue 项目。

以上是两种常用的部署方式，推荐使用第二种方法，因为通过 Git 部署时我们可以通过 Git Hooks 来实现自动化部署。

2. 示例说明

1) 使用FTP上传

在使用FTP上传时，我们需要使用一个FTP客户端工具。下面我会推荐两个：

a. FileZilla

FileZilla 是一款免费、开源的 FTP 客户端。它支持多平台，功能强大，界面简洁易用。

b. WinSCP

WinSCP 是一款免费的 Windows 平台下的 FTP 客户端，它支持 FTP、SFTP、SCP 等文件传输协议，支持同时打开多个连接。

2) 使用Git上传

如果你的服务器可以访问GitHub等网站，则可以使用Git上传方式。这里我们将演示如何使用 Git 在服务器上安装部署 Vue 项目。

a. 安装 Git

首先在服务器上安装 Git。具体请参考 Git 的官方安装指南。

b. 创建 Git 仓库

在服务器上创建一个 Git 仓库。在 Git 仓库中创建一个分支，专门用于存储 Vue 项目文件。在该分支下，再创建一个目录（如：/var/www/vue），用于存放 Vue 项目的所有文件。

c. 检出代码并构建

在本地电脑上使用 Git 命令将项目推送到服务器上。然后，在服务器上使用以下命令检出代码：

git clone https://github.com/<username>/<repo>.git

检出代码到新的文件夹：

cd /var/www/
git clone https://github.com/<username>/<repo>.git my-project

进入该文件夹，执行构建：

cd /var/www/my-project
npm install
npm run build

d. 安装web服务器

选择一款合适的 Web 服务器，比如Nginx、Apache等，通过配置 Web 服务器的 Virtual Host 来将项目发布到公网。

在服务器上安装 Nginx：

sudo apt-get update
sudo apt-get install nginx

然后修改 Nginx 的配置文件：

sudo nano /etc/nginx/sites-available/my-project

输入以下内容：

server {
    listen 80;
    server_name domain.com;
    root /var/www/my-project/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

保存文件并退出。

创建一个软链接：

sudo ln -s /etc/nginx/sites-available/my-project /etc/nginx/sites-enabled/

重启 Nginx：

sudo systemctl restart nginx

打开浏览器，访问 http://domain.com，即可查看 Vue 项目。

以上就是一个完整的打包和部署 Vue 项目的攻略，不同的系统和服务器环境有不同的设置，但思路和步骤大体一致。