vue设置前端配置文件

项目业务中有时会出现频繁变动的变量，比如首页的宣传语、一些时间时长的控制等，时间充裕且有必要的话，可以做一个配置页面在服务器端进行存储和修改，但是在开发过程中以保证业务功能先完成的情况下，可以先将这些变量抽取出来，放在一个json文件中作为配置文件，测试/运维人员可以通过手动修改文件中的值来模拟不同的情况以便于测试。

实现方法如下：

1.在static（vue2）或者public（vue3）下新建config.json文件：

{
    "baseUrl":"http://xxxx.com",
    "baseIp":"ws://xxxx.com",
    "countdown":30,
    "notice":"这里是可随意变动的通知内容",
    "time":"2021.11.30-2021.12.02",
    "version":"0"
}

2.在入口文件index.js中，这样建立vue实例：

import Vue from 'vue'
import axios from 'axios';
import App from './index.vue'

let startApp = function () {
  axios.get('/static/urlPage.json').then(res => {
    //将配置文件中全部内容挂载到vue实例上
    Vue.prototype.$global = res.data
    console.log(Vue.prototype.$global)

    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

  })
}
startApp()

3.项目中可以通过this.$global.xxx来获取相关的值。

<div class="notice">
    <p class="animate">
       {{$global.notice}}
    </p>
</div>

补充：

该项目中共写了三套页面，一套后台管理A两套展示页面BC，因此出现了需要不同打包方式的需求，如AB、AC、ABC，因此我同样使用上面的配置做了个初步处理：

在打包配置文件build/utils.js中，

//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
      var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      if(urlPage.version=='0'){
        if(filename=='pageB'){
          console.log('0版本入口不打B页面')
        }
        else{
          map[filename] = filePath
        }
      }else if(urlPage.version=='1'){
        if(filename=='pageC'){
          console.log('1版本入口不打C页面')
        }
        else{
          map[filename] = filePath
        }
      }else{
        console.log('全部入口');
        map[filename] = filePath
      }
  })
  return map
}

//模板打包同样处理
exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
      let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      if(urlPage.version=='0'){
        if(filename=='pageB'){
          console.log('0版本入口不打B页面')
        }else{
          let conf = {
            // 模板来源
            template: filePath,
            // 文件名称
            filename: filename + '.html',
            // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
            chunks: ['manifest', 'vendor', filename],
            inject: true
          }
          if (process.env.NODE_ENV === 'production') {
              conf = merge(conf, {
                  minify: {
                      removeComments: true,
                      collapseWhitespace: true,
                      removeAttributeQuotes: true
                  },
                  chunksSortMode: 'dependency'
              })
          }
          arr.push(new HtmlWebpackPlugin(conf))
        }
      }else if(urlPage.version=='1'){
        ....
      }else{
        console.log('全部页面');
        ....
      }
  })
  return arr
}

这样就可以通过配置文件中的version来控制打包时只打包指定的页面，为0打包AC、为1打包AB、否则打包ABC，以达到分别部署的目的。