1.打包Vue项目
在vue.config.js文件配置outputDir,为打包项目的文件夹名,自己命名
参考vue项目下的package.json文件里scripts配置的prod命令,执行打包命令
npm run build:prod
打包完成后的文件夹内文件如下图所示
2.下载nginx压缩包
nginx官网下载 选择稳定版,如下图所示
下载完成解压nginx-1.24.0.zip 如下图所示
直接点击nginx.exe启动nginx,然后访问localhost出现下面提示,说明启动成功
nginx常用命令
//启动nginx
start nginx
//停止nginx
nginx.exe -s stop
//重启nginx
nginx.exe -s reload
//强制关闭所有nginx
taskkill /IM nginx.exe /F
//查看nginx版本
nginx -v
3.部署vue到nginx
把打包vue生成的admin-vue文件夹复制到nginx的html目录下
进入conf目录,如下图所示,进入nginx的config文件夹
打开nginx.conf文件,找到server,将location里的路径修改成我们vue项目的访问路径
配置完成后,重启nginx
nginx.exe -s reload
访问localhost或127.0.0.1 测试访问成功
如果以上都配置了,访问出现404,还需要在location下添加以下配置
try_files $uri $uri/ /index.html;
location的完整内容如下
配置后重启nginx,这次访问就成功了,刷新也没问题了
nginx.exe -s reload
上面配置后发现后端接口访问不了,还需要进行后端接口配置,在location配置的下面添加后端接口配置
prod-api是访问后端的api前缀
location /prod-api/ { # 配置后台数据的接口
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/; #实际的后端接口的服务器地址
}
关于配置的内容代表什么意思,参考 nginx 反向代理参数介绍
nginx 完整配置如下
配置完成后,记得重启nginx,再次访问vue项目即可成功
nginx.exe -s reload
至此,nginx部署vue项目配置完成。