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 到此搞定，效果图

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