在前端开发中，SPA（Single Page Application）已经成为了一种非常流行的开发方式。而Vue.js作为现在最流行的前端框架之一，自然也有着非常成熟的打包工具——Vue-build。
在使用Vue-build打包之后，我们需要将打包后的代码部署到Nginx服务器上，以便于用户访问。而本篇文章就将详细介绍如何将Vue-build打包后的SPA项目部署到Nginx服务器上。
准备工作
在开始之前，我们需要做一些准备工作：
- 安装Nginx服务器
- 打包Vue项目
其中，打包Vue项目的方式可以使用Vue-cli提供的打包命令：
npm run build
这个命令会生成一个dist文件夹，里面包含了我们打包后的代码。
部署流程
1. 将打包后的代码上传到服务器
将打包后的代码上传到服务器上，可以使用scp命令：
scp -r /path/to/dist username@server:/path/to/destination
其中，/path/to/dist是本地的打包后的代码路径，username@server是服务器的用户名和IP地址，/path/to/destination是上传到服务器的目标路径。
2. 配置Nginx服务器
在Nginx服务器上配置一个虚拟主机，使得访问该主机时可以将请求转发到我们上传的代码。
在Nginx的配置文件中添加以下内容：
-- -------------------- ---- -------
------ -
------ ---
----------- ------------
---- ---------------------
----- -----------
-------- - -
--------- ---- ----- ------------
-
-其中，example.com是你的域名，/path/to/destination是你上传代码的路径。这个配置文件的作用是将所有请求都转发到index.html文件中，以便于Vue-router的路由可以正常工作。
3. 重启Nginx服务器
在修改了Nginx的配置文件之后，我们需要重启Nginx服务器，以使得修改生效。可以使用以下命令重启Nginx：
sudo service nginx restart
4. 访问你的应用
现在，你的应用已经成功地部署到了Nginx服务器上。可以通过访问你的域名来访问你的应用了。
总结
本篇文章详细介绍了如何将Vue-build打包后的SPA项目部署到Nginx服务器上。通过这篇文章的学习，你可以轻松地将你的Vue项目部署到服务器上，并让用户可以访问到你的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d0600aadd4f0e0ff95dce0