vue项目外挂配置文件（js 和 json）

---

前言

前端开发过程中，会有很多关键性的、易改动的常量，例如：后台url、 第三方登录的url等其他第三方链接地址，它们都是很容易更改的常量。 要是我们把这些变量写死在代码中，所引发的问题就是，在线上，也就是生产环境中，当某个url发生了变化，那么前端就必须在代码中修改对应位置的url ，然后再次打包部署，听起来就很麻烦。。。

---

提示：

特别注意:

• 适用于Vue CLI 3.3 之后（包括3.3）的版本, 也就是使用vue.config.js配置文件名的项目。
• Vue CLI 3.3 之前的版本， 可能需要小小的改动

一、外挂JS配置文件

1. 创建config.js

• 在public目录中手动创建一个config.js文件，（名称不固定，这里以config名称为例）

• 编写你需要的一些配置信息内容 ，例如：

  const Config = {
    // 后台url
    BACKEND_URL: 'https://www.kkk.com'
  }
  

2. 导入config.js到index.html

• 放入index.html头部。
• 

3. 使用config.js中的变量

• 因为导入到index.html，所以在文件的每个地方都可以去访问到config.js中的常量（这个不用讲都知道），直接使用即可， 如下图
• 

二、外挂json配置文件

1.准备工作

npm install generate-asset-webpack-plugin --save

2. 配置vue.config.js

代码如下（示例）：

// 配置接口输出文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')
var createServerConfig = function(compilation){
  // 配置需要的api接口 这里cfgJson中的内容就是导出的json文件中的内容
  let cfgJson = {
    VUE_APP_SERVICE_URL: 'http://demo.1.test/'
  }
  return JSON.stringify(cfgJson)
}
module.exports = {
	chainWebpack(config) { 
	//输出配置文件的配置
    config
          .plugin('GenarateAssetPlugin')
          .use('generate-asset-webpack-plugin', [{
            filename: 'serverConfig.json',
            fn: (compilation, cb) => {
              cb(null, createServerConfig(compilation))
            },
            extraFiles: []
          }])
    }
}

3.读入数据

• 这里有一个需要注意的地方，就是：这里去请求json文件，使用fetch进行请求，（为了防止axios的baseURL被改动以后出现的错误）

代码如下（示例）：

if (process.env.NODE_ENV === 'production') {
  // 应用配置文件里面的接口数据
  Vue.prototype.getConfigJson = function(callback) {
    // 使用json文件 配置url
    fetch("/v1/serverConfig.json")
      .then(result => {
        result.json().then(obj => {
          axios.defaults.baseURL = obj.VUE_APP_SERVICE_URL;
          //挂载到vue原型上面，这样就可以在项目中调用了
          Vue.prototype.$configApiUrl = obj.WS_URL
          callback();
        });
      })
      .catch(error => {
        console.log("getConfigJson Error!", error);
      });
    // 使用js 配置url
    // axios.defaults.baseURL = Config.VUE_APP_SERVICE_URL
    // Vue.prototype.$configApiUrl = Config.WS_URL
    callback()
  }
}
if (process.env.NODE_ENV === 'development') {
  Vue.prototype.getConfigJson = function(callback) {
    axios.defaults.baseURL = 'http://demo.10-124-130-142.sslip.io/api'
    Vue.prototype.$configApiUrl = 'ws://demo.10-124-130-142.sslip.io/api'
    // axios.defaults.baseURL = 'http://10.141.198.107:8000/api' // 曾
    // axios.defaults.baseURL = 'http://10.141.196.130:8000/api' // 袁
    // axios.defaults.baseURL = 'http://10.141.196.228:8000/api' // 杨
    // axios.defaults.baseURL = 'https://www.microfoundry.fii-fmc.com/api'

    // 会在该函数执行完之后，再去执行
    callback()
  }
}

router.beforeEach((to, from, next) => {
  // 这是一个处理同步问题
  Vue.prototype.getConfigJson(() => {
    next()
  })
})

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。