vue部署到nginx

Posted 2023-04-23

参考技术A 1、安装nginx
2、到nginx的安装目录下使用 start nginx 启动nginx服务
3、nginx的主配置文件在 /conf/nginx.conf
4、修改vue项目里的 vue.config.js 的配置文件

5、打包部署文件 npm
6、将打包部署后的文件放在nginx/html目录下
7、修改nginx的配置文件

8、测试配置文件 nginx -t
9、重启，载入新的配置文件 nginx -s reload
10、此时打开localhost/testWeb就能看到页面了

nginx 部署 多个vue项目 端口代理配置问题

参考技术A 一 . 更改vue 前端项目 打包根路径

改为

由以上三中类型 运行打包命令后 把dist包 分别对应根路径的名称 重新命名

二. 把第一步拿到的三个项目压缩包 上传到远程服务 nginx 下的html文件夹下 如下：

更改 nginx.conf 配置如下

改成不同的名字“应该也行”打包后直接就是这个文件名 而不是dist
自己可以试一试没事）

(访问时最好在路径后 加个 '/')
更改配置后 重启项目即可
若在 项目运行中与后段接口 交互中出现问题可参考 https://www.jianshu.com/p/12ae939fafef