Vue项目部署：如何打包并上传至服务器进行部署？

好的，现在我们要把Vue项目进行打包然后部署到服务器上，首先确保你的机器上安装了Node.js和npm。

一、项目打包

首先，打起来你的项目。在控制台中进入到你的项目目录，之后执行以下的命令：

npm run build
​

这个命令会对整个项目进行打包。打包完成后，项目目录下会出现一个新的 dist文件夹，这里就存放的是待部署的项目文件。

二、部署到服务器

接着，我们要把打包好的 dist文件夹中的内容传输到服务器上。

首先你需要在服务器上创建一个用于存放Vue项目的文件夹，例如我们叫它 vue_app。

然后，使用scp命令将 dist文件夹下的内容传输到服务器上 vue_app文件夹里。在控制台执行如下命令：

scp -r dist/* 用户名@服务器ip:/路径/vue_app
​

三、配置服务器

现在的服务器上已经有了我们刚刚上传上去的Vue项目代码。然后，我们需要配置服务器的web服务。

这里以nginx为例，你需要打开nginx的配置文件，添加以下配置：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /路径/vue_app;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
​

保存后退出，然后通过以下命令重新启动nginx服务：

sudo service nginx restart
​

四、验证部署

最后一步，输入你的服务器IP地址试试看。如果一切配置无误，你应该能看到刚刚上传上去的Vue项目运行在服务器上。