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）

const requst = axios.create({
  baseURL: '/',      //是根据vue.config.js中代理自己配置的那个路径来的
  // baseURL: '/music', 
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

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