VUE 專案：API配置、版本控制(V1.0方案)

Q 問題：

• 專案的api的baseUrl 需要靈活配置，不能打包在程式碼中。
• 專案需要寫入版本號，用以保證使用者的瀏覽器資源為最新。

自古評論出大佬，在下初級解決方案奉上。歡迎大佬評論指正更高的解決方案。

問題一(在下解決方案)

在專案public目錄下新增檔案，config.js，內容為：

// 此處設定是為了方便多環境部署，直接修改即可
var baseUrl = (window.baseUrl = {
  dev: 'https://www.baidu.com',
  pro: 'https://www.baidu.com',
  mock: 'https://www.baidu.com'
})

複製程式碼

在 axios 的配置檔案中，

const getUrl = () => {
  if (process.env.NODE_ENV !== 'production') {
    return baseUrl.dev
  } else {
    // 有必要的話，繼續寫規則
    return baseUrl.pro
  }
}
export default () => {
  // 公共地址
  axios.defaults.baseURL = getUrl()
}
複製程式碼

問題二(在下解決方案)

在vue.config.js中新增內容

const path = require('path')
const fs = require('fs')
const CompressionPlugin = require('compression-webpack-plugin')
const resolve = dir => {
  return path.join(__dirname, dir)
}
// 寫入版本號
;(() => {
  // 以時間戳作為版本號~~~主要是因為傻，想不到其它方式
  let v = +new Date()
  process.env.VUE_APP_VERSION = v
  // 此處是寫入.env檔案中，參考連結( https://cli.vuejs.org/zh/guide/mode-and-env.html )
  fs.writeFile(resolve('.env'), `VUE_APP_VERSION=${v}`, err => {
    if (err) {
      return console.error(err)
    }
    console.log(`版本號變數寫入成功，本次為${v}`)
  })
  // 寫入到public 的檔案
  fs.writeFile(resolve('public/v.json'), JSON.stringify({ version: v }), err => {
    if (err) {
      return console.error(err)
    }
    console.log(`版本號寫入成功，本次為${v}`)
  })
})()
複製程式碼

接下來是重點

在api/api.js 中寫入內容

// 版本號獲取
export const getVersion = () => {
  return axios.request({ url: `${location.origin}/v.json`, method: 'get' })
}
複製程式碼

在router/index.js中寫入內容

router.beforeEach((to, from, next) => {
  getVersion()
    .then(res => {
      if (process.env.VUE_APP_VERSION.toString() !== res.data.version.toString()) {
        iView.QhMessage.info({
          duration: 100,
          closable: true,
          content: '系統版本有更新，可按【CTRL + F5】獲取最新資源！'
        })
      }
    })
    .catch(err => {
      console.log(err)
    })
  iView.LoadingBar.start()
  next()
})
複製程式碼

OK 到此搞定，效果圖

自古評論出大佬，在下初級解決方案奉上。歡迎大佬評論指正更高的解決方案。