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

￡神魔★判官ぃ 2022-05-01 12:12 555阅读 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 到此搞定，效果图

> **自古评论出大佬，在下初级解决方案奉上。欢迎大佬评论指正更高的解决方案。**

转载于:https://juejin.im/post/5ca2d47551882543d8590702