vue本地开发配置及项目部署

一,

 

 二,本地模拟配置代理,请求qq音乐的接口数据

 三,axios请求头封装               参考http://www.axios-js.com/zh-cn/docs/#%E4%BB%80%E4%B9%88%E6%98%AF-axios%EF%BC%9F

之前项目中本地post请求报错,get方式没问题

请求头的类型            Content-Type

1. application/json     数据以json格式请求 => {"key": value}

2.application/x-www-form-urlencoded    form表单的数据格式   =>  name=value&name=value

3. mutipart/form-data   上传文件的额格式

4.text/xml 格式

封装axios(这里需要注意的是baseURL,因为一个大型项目中可能有很多个后台地址,在vue.config.js配置代理的时候,

每个代理都有一个自定义的代理路径,并重写了端口,因此每次请求的路径前面都要加上自定义的代理路径如:/api,所以说在这个地方最好写成 / ,

然后每次请求都是之前那样前面加自定义的代理路径如:/api

 

 1 const requst = axios.create({
 2   baseURL: '/',      //是根据vue.config.js中代理自己配置的那个路径来的
 3   // baseURL: '/music', 
 4   timeout: 5000,
 5   headers: {
 6     'Content-Type': 'application/json'
 7   }
 8 });
 9 
10 export default requst

 

 

 

 

 

 

 

然后main.js导入

 

 使用封装好的axios封装接口请求(api封装)

 

 配置axios拦截器(获取token,请求头携带token)

 四,nginx:http://nginx.org/en/download.html

前端独立部署 -nginx

nginx 负载均衡,静态服务器,正反向代理

下载-解压(路径一定不要有中文,启动失败还有可能是80的端口被占用,差点给我搞死,任务管理器查看进程)

用法:

1.在nginx文件夹下,cmd进入命令环境

2.  start nginx    启动时的命令

    nginx -s stop 停止  不保存信息

    nginx -s quit 停止  保存信息

    nginx -s reload 重启

    nginx -v   查看版本

    查看启动是否成功  浏览器直接输 localhost 默认端口是80,启动成功会看到这个页面

 

 将前端项目包丢进html文件夹下,然后 nginx.conf 下配置nginx的正向代理(代理的后端地址)

 

 

 

五,阿里云服务器的购买和使用 https://www.aliyun.com/?utm_content=se_1000301881

 

 

 

 

 

 

 

 

 

 

 

 

 

 进入解压好的文件夹里面 cd nginx-1.17.9

./configure

还有上面的一部解决https的问题

然后 make -j4 && make install          //在local文件夹下会出现 nginx文件夹

cd nginx       cd sbin 

 

 https://blog.csdn.net/qq_27252133/article/details/53646986

 

posted @ 2020-05-30 01:26  顺·  阅读(4004)  评论(0编辑  收藏  举报