Vue打包后文件的接口地址配置的方法

背景常规的vue项目分为本地开发环境和生产环境，在实际项目中，我们在打包之前在.env文件中进行地址配置然后进行打包（vue.config.js文件在开发环境中有效，打包后无效），但在部署过程中地址是不固定的，那么就需要进行动态配置，而不是每次都重新构建代码第一步：在public中新建config.js文件，用来配置接口地址在config.js文件中写入var ipConfig = {baseUr

电线是只猫

7577人浏览 · 2021-10-29 11:06:10

电线是只猫 · 2021-10-29 11:06:10 发布

背景

常规的vue项目分为本地开发环境和生产环境，在实际项目中，我们在打包之前在.env文件中进行地址配置然后进行打包（vue.config.js文件在开发环境中有效，打包后无效），但在部署过程中地址是不固定的，那么就需要进行动态配置，而不是每次都重新构建代码

第一步：在public中新建config.js文件，用来配置接口地址

在config.js文件中写入

var ipConfig = {
  baseUrl: 'http://192.168.10.52:9999'
}

第二步：在public下index.html中引入config.js文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="referrer" content="no-referrer">
  </meta>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="./config.js"></script>
</body>

</html>

第三步：在utils下新建axios.js文件，使用window.ipConfig （全局可用）进行调用，附赠axios封装代码

import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'
import router from '@/router'

// 接口错误情况处理
const errorHandler = err => {
  console.log(err, 'err')
  if (err.response.status === 500) {
    Message.error('服务器异常，请联系管理员！')
  }
  return Promise.reject(err)
}
const service = axios.create({
  // process.env.NODE_ENV === 'development' 判断是否为开发环境,常规项目中通过.env文件进行读取
  withCredentials: false, // cookie
  // baseURL: 'http://192.168.10.52:9999/',
  baseURL: window.ipConfig.baseUrl
  // timeout: 100000
})

service.interceptors.request.use(
  config => {
    const token = store.getters['user/token']
    if (token) {
      config.headers.token = token
    }
    if (config.data && config.data.post) {
      if (config.method === 'post') {
        config.data.post = null
        config.params = config.data
      }
    }
    if (config.requestBase) {
      config.baseURL = window.ipConfig.baseUrl
    }
    return config
  },
  error => {
    console.log(error)
    // return Promise.reject()
  }
)

service.interceptors.response.use(response => {
  // application/octet-stream
  // 统一处理数据格式(JSON格式处理-字符串或json对象)
  let resData
  if (typeof response.data === 'string' && /{/.test(response.data)) {
    try {
      resData = JSON.parse(response.data)
    } catch (e) {
      resData = response.data
    }
  } else {
    resData = response.data
  }
  // 如果自定义代码不是20000，则判断为错误.
  if (resData.status && resData.status != 200 && resData.status !== true) {
    MessageReset({
      message: resData.msg || 'Error',
      type: 'error',
      duration: 5 * 1000
    })

    // 50008: 非法token; 50012: 其他客户端已登录; '505': Token 已过期;
    if (resData.status === '505' || resData.status === '506') {
      // to re-login
      store.commit('user/SET_TOKEN', '')
      setTimeout(() => {
        router.replace({ path: '/login' })
      }, 1000)
    }
    return Promise.reject(new Error(resData.message || 'Error'))
  } else {
    return resData
  }
}, errorHandler)

export default service