如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题

1.将Vue项目打包

在终端中执行 npm run build
1

打包完成后可以在项目的dist目录看到index.html（如下图）。将此目录的所有文件放到nginx服务器即可访问。

2.下载nginx并放到服务器上

点此处下载nginx
通过点击上面的链接，下载对应于自己系统的nginx，这里使用Windows系统演示

下载得到的是一个zip的压缩包，这个不需要安装，解压就能用。

把这个压缩包放到服务器上解压出来（其实放在本地也是一样的，因为系统一样）。

先启动nginx试一试：
在资源管理器的路径框中输入cmd，回车（如下图）。就能打开终端（如下图），并将路径调整到当前目录，这样就能直接调用到nginx.exe了


接下来在终端中输入 nginx.exe，
没有报错就是启动成功，也可以在浏览器输入127.0.0.1看能不能访问到nginx的欢迎页，能访问就nginx启动成功。
如果有报错就后面的看第5节，大部分情况是80端口被占用了。

启动成功如下图：

3.配置ip访问

接下来我们只要在配置文件（conf/nginx.conf）中进行配置，
打开配置文件可以发现，里面又一个一个的server 对象组成（如下），我们每次增加一个项目增加一个server就行。

server {
		
}
1
2
3

接下来我写一个server指向我上面打包的项目：
先在html文件夹中新建一个hhdglm文件，把打包后的东西放进去。
解释下面的server：首先server_name写我服务器的ip：121.4.78.106表示别人通过这个ip访问我的服务器时就匹配到了我写的这个server，然后就能通过url后面的路径/访问到html/hhdglm/index.html这个文件（默认访问index.html）。

server {
        listen       80;
        server_name  121.4.78.106;
        location / {
            root   html/hhdglm  //执行你打包后的dist里面的文件放的位置 html文件夹在根目录可以看到 要在里面新建一个test文件夹 这样做的好处是把不同的项目分开，一个项目一个文件夹 
            index  index.html index.htm;
        }  
    }
1
2
3
4
5
6
7
8

不出意外就能通过服务器的ip访问打包之后的项目了
http://121.4.78.106

4.配置域名访问

使用域名访问首先要到域名供应商提供的后台将域名解析到服务器ip（如下图），

然后将server_name 换成域名即可。如下：

server {
        listen       80;
        server_name  www.hhdglm.com;
        location / {
            root   html/hhdglm  
            index  index.html index.htm;
        }  
    }
1
2
3
4
5
6
7
8

访问如下：http://www.hhdglm.com

5.端口被占用怎么办？

可以改用其他端口，但是改用其他端口不方便，因为使用域名访问的话默认就是80端口，所以我们要让nginx启动在80端口，把占用80端口的程序干掉就行了。
80端口被占用报错图：

解决方法（如下图）：
1.在终端中输入：netstat -aon | findstr :80 查到进程的pid
2.然后使用 tasklist|findstr "进程号" 关闭进程 我这里tasklist|findstr "4

然后在此输入nginx.exe启动没报错即可。注意要在nginx.exe所在目录执行。

6.配置https

要去域名供应商提供的后台申请ssl证书，将证书现在放到nginx的conf目录下。
配置如下：

server {
        listen       443 ssl;
        server_name  www.hhdglm.com hhdglm.com;
		root html;
        ssl_certificate      1_www.hhdglm.com_bundle.crt;
        ssl_certificate_key  2_www.hhdglm.com.key;
        
       ssl_session_timeout 10m;
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
       ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
       ssl_prefer_server_ciphers on;
    }
1
2
3
4
5
6
7
8
9
10
11
12

7.使用nginx反向代理解决前端请求后端跨域问题

server {
        listen       80;
        server_name  www.hhdglm.com;
        location / {
            root   html/hhdglm  
            index  index.html index.htm;
        }  
        location /api{
			rewrite ^.+api/?(.*)$ /$1 break;
			include uwsgi_params;
			proxy_pass http://127.0.0.1:8000;
		}
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

使用路径/api标志前端是请求后端的接口，然后转发到后端运行的端口上处理。只需要在前端请求后端的url后多加一层/api即可，如：

axios.defaults.baseURL="http://www.hhdglm.com/api
1

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦