上线服务器流程用法及说明-Toy模板网

这篇具有很好参考价值的文章主要介绍了上线服务器流程用法及说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

跨域

为什么会产生跨域

因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。

怎么解决跨域

解决跨域的方法：

第一种jsonp的方法。（面试的时候各位大哥大姐千万不要先说jsonp）

第二种使用CORS解决跨域问题，即跨域资源共享，在后端设置响应头部，加一句代码：access-control-allow-origin:"*"或者允许交互的域名。

第三种 vue react angular 使用本地开发者服务器代理跨域。devserver的proxy解决，新建vue.config.js（必须必须必须必须必须必须在项目的根路径下）文件，修改propyTable中的target的值，就可实现用前端解决跨域。(打包上线后就废了)

测试接口：中国天气网-专业天气预报、气象服务门户

proxy:{
        "/api（可以随便写）":{
             target:"请求地址",
             changeOrigin:true,
             "pathRewrite":{
               "^/api（和上面一样）":"/"
             }
        }
    },

实现流程vue

1.在项目的根路径下创建vue.config.js

2.在这个文件中写入

module.exports={
    devServer:{
        open:true,//自动开启浏览器
        port:8888, //修改端口
        proxy:{
            "/api":{
                 target:"http://www.weather.com.cn",
                 changeOrigin:true,
                 "pathRewrite":{
                   "^/api":"/"
                 }
            }
        },
    }
}

3.修改里面的参数地址并且把你的/api 替换组件中的请求地址

4.重启项目

第四种，使用nginx反向代理跨域

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   dist;
            index  index.html index.htm;
        }
        #设置反向代理跨域
        #设置反向代理跨域
        #设置反向代理跨域
        #设置反向代理跨域
        #设置反向代理跨域
        #设置反向代理跨域
        #设置反向代理跨域
        #设置反向代理跨域
        location /api {
        #设置代理需要重写/api
因为在开发的时候所有的接口都是以/api开头的，所以在请求代理的时候和proxyTable一样的逻辑，需要rewrite重写。
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass http://www.weather.com.cn;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}



 server {
        listen       9999; # 监听端口
        server_name  localhost; # 域名可以有多个，用空格隔开

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:\工作\project\client_admin_system\dist;     #站点根目录，即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。 
            index  index.html index.htm;    #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
        }

        #ssl配置省略
         location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass  http://192.168.1.100:7001;    #node api server 即需要代理的IP地址
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }

        #error_page  404              /404.html;    #对错误页面404.html 做了定向配置

        # redirect server error pages to the static page /50x.html
        #将服务器错误页面重定向到静态页面/50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

第五种，使用otherWindow.postMessage 是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

项目打包

vue项目中大家在运行的时候我们是需要用内置的devServer帮助我们自动项目开发过程中没有问题

但是我们所写的项目今后是需要上公网让用户访问的所以我们需要把项目放在性能更好的服务器上运行

还有就是我们所写的是.vue文件浏览器不认识没有办法直接解析

所以我们就绪要对当前项目进行打包就是把项目编译成 html css js 方便我们把项目放到服务器上也方便浏览器解析

打包流程

1.npm run build命令打包但是会发现打包之后资源路径有问题

2.修改静态资源路径 publicPath

module.exports={
    // 注意位置
    // 注意位置
    // 注意位置
    // 注意位置
    // 注意位置
    publicPath:"./",

    devServer:{
        open:true,//自动开启浏览器
        port:8888, //修改端口
        proxy:{
            "/api":{
                 target:"http://www.weather.com.cn",
                 changeOrigin:true,
                 "pathRewrite":{
                   "^/api":"/"
                 }
            }
        },
    }
}

3.修改路由模式为hash