vue_cli3中axios封裝逆航、配置不同開發(fā)環(huán)境變量

項目開發(fā)中，一般都會有開發(fā)環(huán)境、測試環(huán)境丽蝎、預生產(chǎn)環(huán)境盔憨、生產(chǎn)環(huán)境等多個環(huán)境誉尖，所以項目在打包時我們就會調(diào)用不同環(huán)境的接口烤咧，此時我們就要通過配置變量來解決這一問題。

一酪耳、配置不同環(huán)境變量

下面以開發(fā)浓恳、測試、預生產(chǎn)、生產(chǎn)這4個環(huán)境為例颈将。

1梢夯、在項目根目錄創(chuàng)建4個不同的文件，代表不同的環(huán)境配置

開發(fā)環(huán)境： .env.development
測試環(huán)境： .env.qa
預生產(chǎn)環(huán)境： .env.stage
生產(chǎn)環(huán)境： .env.production

2吆鹤、在不同文件配置變量

.env.development

NODE_ENV = 'development'
VUE_APP_BASE_URL = 'http://www.development.api'

.env.qa

NODE_ENV = 'qa'
VUE_APP_BASE_URL = 'http://www.qa.api'

.env.stage

NODE_ENV = 'stage'
VUE_APP_BASE_URL = 'http://www.stage.api'

.env.production

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://www.production.api'

注意：
1厨疙、這里聲明的NODE_ENV = 'development' 就表示開發(fā)環(huán)境
2洲守、除了 baseUrl 和 NODE_ENV ,其他環(huán)境變量使用 VUE_APP 開頭 ,比如VUE_APP_XXX
3疑务、然后我們可以通過process.env.VUE_APP_XXX來取到定義好的環(huán)境變量
4、下文在封裝axios的js文件中賦值baseUrl的時候就會通過環(huán)境變量取值

3梗醇、配置打包命令package.json

  "scripts": {
    "dev": "vue-cli-service serve",
    "dev-qa": "vue-cli-service serve --mode qa",
    "dev-stage": "vue-cli-service serve --mode stage",
    "dev-product": "vue-cli-service serve --mode production",
    "build-qa": "vue-cli-service build --mode qa",
    "build-stage": "vue-cli-service build --mode stage",
    "build-product": "vue-cli-service build --mode production"
  },

說明：
npm run dev表示：vue-cli-service serve會默認執(zhí)行.env.development文件
--mode qa來指定執(zhí)行.env.qa文件
--mode stage來指定執(zhí)行.env.stage文件
--mode production來指定執(zhí)行.env.production文件

二知允、axios二次封裝

1、創(chuàng)建`request.js`文件

在src下創(chuàng)建一個utils文件夾叙谨，用來放一些工具類型的文件温鸽，首先在里面創(chuàng)建一個用來封裝axios的文件request，當然文件名自定義

//src/utils/request.js
import axios from 'axios'

// 創(chuàng)建 axios 實例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url
  timeout: 10000, // request timeout
})

//  請求攔截器
service.interceptors.request.use(
  (config) => {
    config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    config.headers['Accept'] = 'application/json'
    config.headers['Request-From'] = 'mobile'
    let token = sessionStorage.getItem('loginToken') || null
    if (token) {
      // 如果token不為null手负，否則傳token給后臺
      config.headers['Token'] = token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    const res = response.data
    //屆時根據(jù)后端返回success或者code值判斷
    if (res.success === true) {
      return res
    } else {
      return res
    }
  },
  (error) => {
    //響應(yīng)錯誤
    return Promise.reject(error)
  }
)

export default service

注：文件中的baseURL: process.env.VUE_APP_BASE_URL則就是根據(jù)不同環(huán)境取不同的接口地址

2涤垫、創(chuàng)建`common.js`文件

在src下創(chuàng)建一個api文件夾，用來放一些接口的文件,當接口過多的時候可以分類創(chuàng)建接口文件竟终，目前我們先創(chuàng)建一個公共的文件common.js,然后引入剛才封裝的request.js文件

//src/api/common.js
import request from '@/utils/request'

/**
 * POST 方法 與 GET方法  區(qū)別
 *
 * post==> data: obj
 * get==>params: obj
 *
 */
// 例如(post)：
 export function updateBook(obj) {
   return request({
     url: '/book/update',      // url = base url + request url
     method: 'post',
     data: obj,    //----------------->>>區(qū)別
   })
 }
// 例如(get)：
 export function getBookList(obj) {
   return request({
     url: '/book/list',      // url = base url + request url
     method: 'post',
     params: obj,    //----------------->>>區(qū)別
   })
}

3蝠猬、頁面中使用

<template>
  <div class="booktest"></div>
</template>
<script>
import { getBookList, updateBook } from '@/api/common'   //路徑
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
    //get方式
    getBookList() {
      let params = {
        userName: '張三',
      }
      getBookList(params).then((res) => {
        //返回值
      })
    },
    //post方式
    updateBook() {
      let params = {
        bookId: 1,
      }
      updateBook(params).then((res) => {
        //返回值
      })
    },
  },
}
</script>

三、vue.config.js配置

module.exports = {
    // 選項...
    /* 部署應(yīng)用包的基本URL */
    publicPath: './',

    /* 當運行 vue-cli-service build 時生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄 defalut: dist */
     outputDir: './dist',
    //可根據(jù)不同環(huán)境打包不同地址
    //outputDir: process.env.NODE_ENV == 'production' ?
       // '../../../../dist-mobile/product/course' : process.env.NODE_ENV == 'stage' ?
       // '../../../../dist-mobile/stage/course' : process.env.NODE_ENV == 'qa' ?
        //'../../../../dist-mobile/qa/course' : '../../../../dist-mobile/run/course',

    /* 放置生成的靜態(tài)文件目錄（js css img） */
    assetsDir: 'static',

    /* 指定生成的index.html 輸出路徑 相對 default: index.html */
    indexPath: 'index.html',

    /* 指定生成文件名中包含hash default: true */
    filenameHashing: true,

    // 所有 webpack-dev-server 的選項都支持统捶。
    devServer: {
        host: '0.0.0.0',
        port: 8888, // 端口號
        https: false,
        open: false, //配置自動啟動瀏覽器

        // 配置多個代理
        proxy: {
            '/api': {
                target: process.env.VUE_APP_BASE_URL, // 代理服務(wù)器路徑
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '', // 去掉接口地址中的api字符串
                },
            },
        },
    },
}

這樣就完成了根據(jù)不同項目啟動命令,來自動配置不同環(huán)境,匹配指定接口地址了
例如：
啟動npm run dev-qa,
執(zhí)行vue-cli-service serve --mode qa,
根據(jù)--mode qa,
查找.env.qa文件 ,
獲得環(huán)境NODE_ENV為:qa環(huán)境, 接口地址VUE_APP_BASE_URL為:http://www.qa.api
所以封裝的axios中的baseUrl地址就是http://www.qa.api
調(diào)用后的地址就是:http://www.qa.api/book/list
大概就是這么個流程榆芦，
接下來就可以愉快的開發(fā)了.

文件目錄

vue_cli3中axios封裝武翎、配置不同開發(fā)環(huán)境變量

vue_cli3中axios封裝驯嘱、配置不同開發(fā)環(huán)境變量

一酪耳、配置不同環(huán)境變量

1梢夯、在項目根目錄創(chuàng)建4個不同的文件，代表不同的環(huán)境配置

2吆鹤、在不同文件配置變量

3梗醇、配置打包命令package.json

二知允、axios二次封裝

1、創(chuàng)建`request.js`文件

2涤垫、創(chuàng)建`common.js`文件

3蝠猬、頁面中使用

三、vue.config.js配置

vue_cli3中axios封裝驯嘱、配置不同開發(fā)環(huán)境變量

一酪耳、配置不同環(huán)境變量

1梢夯、在項目根目錄創(chuàng)建4個不同的文件，代表不同的環(huán)境配置

2吆鹤、在不同文件配置變量

3梗醇、配置打包命令package.json

二知允、axios二次封裝

1、創(chuàng)建request.js文件

2涤垫、創(chuàng)建common.js文件

3蝠猬、頁面中使用

三、vue.config.js配置

1、創(chuàng)建`request.js`文件

2涤垫、創(chuàng)建`common.js`文件