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