Nginx部署Vue项目

1、项目配置修改（部署服务器）

前端vue.config.js配置文件修改
port配置网站访问端口；
host配置服务器ip地址；
proxy配置跨域问题，用于访问后端地址 ：target为（IP+端口）；

注意：port端口要在服务器入端口开放。

2、项目打包

打包命令：npm run build
打包配置文件：package.json，在这里可以配置打包属性，默认也以使用

打包完成：在项目文件中出现demoVue2（这里是配置打包改了名字）

3、安装Nginx，服务器安装Nginx（注意版本，这次使用的是nginx1.24，vue2.6.14）

安装完成nginx项目目录：

4、项目上传（这里使用的是宝塔+华为云服务器）

将项目上传到服务器nginx项目html文件下，
一个项目（总项目）可以直接放在html文件夹内，多个项目（子项目）可以放在html的文件夹内,如图:

5、nginx配置

主要配置server
监听端口：与前面项目配置一致
服务器地址：服务器ip（与前面项目配置一致）

项目配置：
配置web项目路径，主程序入口，错误页面等

多个项目可以使用多个server进行配置，对应前面的html下面多个项目。

注意事项：

1、访问地址，使用http，不使用https，安全访问需要额外网站配置。
2、nginx ip端口占用问题，换端口（建议），或者杀掉当前占用端口的进程（不建议）。