nginx中怎么部署访问vue-cli搭建的项目
用history模式构建的项目需要借助后台技术，这里选用的是nginx反向代理来部署项目。具体做法如下：
1、创建后台服务器 对象
upstream mixVueServer{
server baidu.com;
#这里是自己服务器域名
}
2、创建访问端口和反向代理规则
server {listen 8082;
server_name localhost;
location / {
root E:/mix_vue/dist;
#定位到项目的目录
#index index.html index.htm;
try_files $uri $uri/ /index.html;
#根据官网这规则配置
}
location ~ \.php${
proxy_pass http://mixVueServer;
#根据后端语言做反向代理处理跨域问题
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
前言：
在开发Vue-Cli搭建项目之后，需要对其进行部署。Nginx是一款高性能的Web服务器软件，可以为Vue项目提供服务支持，下面将详细介绍Nginx部署Vue-Cli搭建项目的流程。
一、安装Nginx
首先需要在服务器上安装Nginx软件，可以通过以下命令执行：
sudo apt-get install nginx
执行完毕后，可以通过访问服务器IP地址验证是否安装成功，如果出现Nginx首页则说明安装成功。
二、配置Nginx
修改Nginx的配置文件，进入nginx.conf文件编辑：
sudo vi /etc/nginx/nginx.conf
在http段内添加以下代码：
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
该配置将Nginx的默认目录/usr/share/nginx/html映射到服务器地址上。
三、打包Vue项目
使用Vue-Cli打包生成的文件，将其拷贝到Nginx的默认目录/usr/share/nginx/html下。
命令执行：
npm run build
四、启动Nginx
启动Nginx服务：
sudo systemctl start nginx.service
此时，Vue项目已经成功部署到Nginx服务上，可以通过访问服务器地址来访问Vue项目的页面。
结语：
本文详细介绍了Nginx部署Vue-Cli搭建项目的完整流程，通过本文的学习，您可以轻松地完成Vue项目的部署，让您的应用快速上线，为用户提供更好的服务体验。
