Nginx部署vue项目和配置代理

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.

目录

概述

网络爬虫的是一个非常常见的需求。

需求：

实现思路分析

1.一般前后端分离的项目需要进行跨域

首先在根目录下创建vue.config.js文件，这个配置文件会在运行项目的时候自动加载`

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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

   changeOrigin:true,是否跨域

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

   pathRewrite:{},//重写api路径，
1
2
3
4
5
6
7

因为原来接口中不存在’/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=>{})
1
2
3
4
5

实际的接口请求地址为：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配置信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

参考资料和推荐阅读

[1]. http://t.zoukankan.com/eye-like-p-13305801.html

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~