nginx部署vue项目及nginx配置

nginx部署vue项目,vue.conf.js配置文件默认配置publicPath为根路径 publicPath:‘/’,只需要打包好dist包,部署nginx即可,根据前端配置好的axios请求前缀baseUrl='prod-api',配置拦截,跳转代理的后台接口即可。

   location / {
            root   /home/projects/web_front; 
            #当项目的vue-router使用history模式时,刷新界面会空白,或使用有参数的url时候会找不到地址,
            #例如:user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }

当某些应用部署在内部网络,通往外网只放行了一个端口时,nginx需要配置统一端口的的多应用服务器(一个server内配置多个应用的时候例如电脑端访问http://x.x.x.x:8080,访问电脑端,http://x.x.x.x:8080/app时访问H5端),需要在vue.conf.js配置文件配置publicPath,例如 publicPath:‘/app’,当使用 publicPath:‘/app’时,需要配置配置nginx的location选项,将location的root配置项目改为alias

 location ^~app {
            alias   /home/projects/h5_front;
            #当项目的vue-router使用history模式时,刷新界面会空白,或使用有参数的url时候会找不到地址,
            #例如:user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }

因为 nginx的location获取到匹配路径(/app)之后,root配置会使用ip+端口的方式请求nginx获取服务器的静态资源,(例如:http://x.x.x.x:8080/aaa.img),而使用alias配置时,会使用ip+端口+匹配的路径访问服务器静态资源,(例如:http://x.x.x.x:8080/app/aaa.img),此时可以正常访问服务器资源。不然会出现报错,找不到服务器静态资源。

nginx配置

server {
        listen       8080;
        server_name  localhost;
		#例如:/ 根路径为电脑端
        location / {
            root   /home/projects/web_front; 
            #当项目的vue-router使用history模式时,刷新界面会空白,或使用有参数的url时候会找不到地址,
            #例如:user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }
        #例如:/app 路径为移动H5端
 location ^~app {
            alias   /home/projects/h5_front;
            #当项目的vue-router使用history模式时,刷新界面会空白,或使用有参数的url时候会找不到地址,
            #例如:user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }

		#nginx配置后台代码,当匹配到prod-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/;  #后台代理地址
        }

        # 避免actuator暴露
        if ($request_uri ~ "/actuator") {
            return 403;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

此时就可以使用http://x.x.x.x:8080访问电脑端的应用,使用http://x.x.x.x:8080/app就可以访问移动端H5的应用,实现了统一的端口访问两个应用

你可能感兴趣的:(#,vue,服务器,nginx,vue)