Nginx部署vue项目和配置代理

news2024/11/8 13:50:57

Nginx部署vue项目和配置代理

目录
- 概述
- - 需求：
- 实现思路分析
- - 1.一般前后端分离的项目需要进行跨域
  - 2.微服务代理
  - 3.vue+nginx实现服务端跨域
  - 4.网页解析器
参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

module.exports = {

    runtimeCompiler: true,

    publicPath: '/', // 设置打包文件相对路径

    devServer: {

        open: process.platform === 'darwin',

        host: '127.0.0.1',

        port: 3000,

        // open: true, //配置自动启动浏览器

        proxy: {

            '/api': {

                // target: process.env.VUE_APP_BASE_URL, //对应自己的接口

                target: 'http://www.xxx.com', //对应自己的接口

                changeOrigin: true,

                ws: true,

                pathRewrite: {

                    '^/api': ''

                }

            }

        }

    },

}
vue.config.js proxy

  target：’’,代理的接口地址，

   changeOrigin:true,是否跨域

   secure:false, 如果是https接口，需要配置这个参数

   pathRewrite:{},//重写api路径，

因为原来接口中不存在’/api’，我们人为加上去就是为了标识哪些接口需要实现代理，但是真正访问接口的时候还是要把接口uri中的‘/api’替换为‘’

我们不仅可以为’/api’实现代理，也可以为其他具有同类功能的接口实现代理，比如我们的接口是发布在多个微服务中的，就需要我们设置多个代理地址，

2.微服务代理

这时，就不能对axios设置统一的baseURL

//axios.defaults.baseURL = ‘’

在使用axios请求接口的时候，如果需要跨域，则在请求接口前加载‘/api’，例如：

const server=’/api’

const uri=server+’/ patient_survey/findByPage’

axios.post(uri).then(res=>{})

实际的接口请求地址为：devServer.proxy.target中的地址
所以实际请求的uri为：http:www.xxx.com/patient_survey/findByPage

3.vue+nginx实现服务端跨域

调用接口会提示404错误，这时还需要在nginx中做一下反向代理

在服务器中找到nginx的配置文件nginx.config

4.网页解析器

server {

        listen 80;

        server_name xxx.com;

        charset utf8;

 

        location / {

                root /data/release/xxx;

                index index.html;

                proxy_pass http://127.0.0.1:8003;

                }

 

             location /api {

                rewrite ^.+api/?(.*)$ /$1 break;

                include uwsgi_params;

                proxy_pass http://www.xxx.com;

        }

 

 

        error_page 404 /404.html;

                location = /40x.html {

        }

        error_page 500 502 503 504 /50x.html;

                location = /50x.html {

        }

}

nginx.config 中的server配置信息