Vue.js 是一个流行的前端框架，用于构建用户界面。在开发完成后，通常需要一个服务器来托管和提供前端代码。Nginx 是一个轻量级的HTTP服务器和反向代理服务器，非常适合这个用途。这篇文章指导你如何在Linux环境下使用Nginx来启动和托管Vue.js前端代码，Vue.js的相关代码可以在Windows上边完成，然后打包为dist文件。
目录
一、简介
二、先决条件
三、配置Nginx
1、修改Nginx配置文件
2、设置动态代理
四、启动Nginx服务
五、总结
小剧场：努力成长！
一、简介
Vue.js 项目通常包含大量的静态文件（如HTML, CSS, JavaScript），这些文件可以通过Nginx来提供。Nginx 可以配置为静态文件服务器，也可以作为反向代理服务器来转发API请求到后端服务器。以下将介绍如何在Linux环境下使用Nginx来启动Vue.js项目，使其可以通过网络访问。
二、先决条件
- 确保你的Vue.js项目已经构建完成，生成了dist目录（或者你的项目指定的输出目录）。
- 确保你已经安装了Nginx
三、配置Nginx
1、修改Nginx配置文件
编辑安装的Nginx配置文件用于你的Vue.js项目。你可以在有权限的目录下创建一个新的目录，例如/home/wxr/，将dist文件拷贝到此目录下。
server{
listen 8082;
#进行设定动态代理，直接进行跳转到指定位置即可,动态代理处不需要设置正则表达式即可使用；
location /api/ {
proxy_pass http://172.17.13.120:5000/;
proxy_set_header Host $host:$server_port;
# Forward the user's IP address to Rails
proxy_set_header X-Real-IP $remote_addr;
}
location / {
root /home/wxr/dist;
}
2、设置动态代理
如果proxy_pass配置的是http://172.17.13.120:5000/，相当于动态代理后端地址，拦截所有http://172.17.13.120:5000/的请求。
这里需要注意如果端口后存在/，相当于是不与location块中的/api/做拼接的，如果端口后不存在这个/，则相当于是拦截所有http://172.17.13.120:5000/api/的请求。
#进行设定动态代理，直接进行跳转到指定位置即可,动态代理处不需要设置正则表达式即可使用；
location /api/ {
proxy_pass http://172.17.13.120:5000/;
proxy_set_header Host $host:$server_port;
# Forward the user's IP address to Rails
proxy_set_header X-Real-IP $remote_addr;
}四、启动Nginx服务
保存并关闭配置文件后，重新加载Nginx配置：
sudo nginx -s reload五、总结
通过以上步骤，你应该能够在Linux环境下使用Nginx成功启动和部署你的Vue.js前端代码。这将使你的应用可以通过网络访问，无论是在开发阶段还是生产环境中。
