Vue项目打包部署步骤详解_进入你的项目文件夹_SSH使用scp命令上传

作者：编程小白 | 发布时间：2025-06-27 |

Vue项目打包部署步骤详解

一、打包项目

开发完成Vue项目后，我们得用Vue CLI来打包。步骤如下：

先确认你已经安装了Vue CLI，没装的话，运行以下命令安装：

bash npm install -g @vue/cli

进入你的项目文件夹：

bash cd your-project-folder

运行Vue CLI的打包命令：

bash npm run build

这会生成一个`dist`文件夹，里面有你打包后的项目文件。

二、配置服务器

部署Vue项目需要服务器，以下是一些选择：

Nginx：高性能的HTTP和反向代理服务器。
Apache：广泛使用的Web服务器。
Node.js：用JavaScript处理服务器逻辑。
静态网站托管服务：如GitHub Pages、Netlify、Vercel等。

以下以Nginx为例：

安装Nginx

（这里省略具体安装步骤，通常通过包管理器或一键安装包进行）

配置Nginx

编辑Nginx配置文件，然后添加以下内容：

server {

    listen       80;

    server_name  localhost;



    location / {

        root   /usr/share/nginx/html;

        index  index.html index.htm;

        try_files $uri $uri/ /index.html;

    }

}

重启Nginx服务

bash sudo systemctl restart nginx

三、上传文件

将打包后的文件上传到服务器，以下是一些上传方式：

FTP/SFTP：使用FileZilla等FTP客户端上传。
SSH：使用scp命令上传。

例如，使用scp命令上传：

bash scp -r dist/* username@server_ip:/path/to/server/folder

四、启动服务

如果使用静态网站托管服务，你的项目应该可以直接访问。如果使用Nginx或其他服务器，确保服务器配置正确且运行中。

Vue项目打包部署主要步骤包括打包项目、配置服务器、上传文件和启动服务。遵循这些步骤，你就能将本地项目顺利部署到生产环境。记得定期更新和维护服务器，优化项目性能。

Vue项目打包部署步骤详解_进入你的项目文件夹_SSH使用scp命令上传