上线服务器流程用法及说明
跨域
为什么会产生跨域
因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。
怎么解决跨域
解决跨域的方法：
第一种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
服务器上线流程
服务器购买与连接
在购买ECS服务器后，系统会创建一个ECS实例。每一个ECS实例对应一台已购买的云服务器。您可以通过电脑上自带的终端工具访问云服务器，进行应用部署和环境搭建。
在ECS实例列表页面，选择实例的所属地域。 找到目标实例，然后在操作列选择【更多】> 【密码/密钥】 > 【重置实例密码】，然后在弹出的对话框设置ECS实例的登录密码 在弹出的页面，单击【立即重启】使新密码生效。 在ECS实例列表页面，复制ECS实例的公网IP地址。 连接远程桌面 （1）方式1 浏览器直接访问
即可连接
（2）远程桌面方式
在电脑的开始中搜索远程桌面
nginx服务器
Nginx是一个http服务器。是一个高性能的http服务器及反向代理服务器。官方测试nginx能够支支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定。
代理服务器
代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。
注意
我们学习的vue的跨域 是基于脚手架内置服务器的 但是我们打包之后这个服务器就不帮助我们启动服务了 所以我们之前配置的跨域设置就作废了
使用
1.解压出nginx得到如下内容
2.打开conf文件夹 复制一份nginx.conf文件 并且修改名字（名字随便起） 这个文件就是nginx的配置文件
3.打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf 启动
4.打开浏览器输入localhost:80即可启动
使用小扩展
记得如果修改服务器内容了 要停止之后在重新启动
打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf -s stop 停止
运行我们打包项目
1.把我们打包好的dist放到根路径下
2.修改我们的.conf文件
3.配置端口
4.在电脑浏览器尝试使用 你的公网ip加端口访问
如不行 重新启动（不要忘了先关闭nginx） 运行浏览器即可看见
