vue打包之后生成一个配置文件修改接口

方法一

• 在 vue-cli 里把我们需要配置修改的文件直接进行抽离，不让 webpack 把配置文件进行编译。

第一步：在 static 文件夹下新建一个名为 config.js 的文件

window.g={
    baseURL1:'http://localhost:8090',
    baseURL2:'/api'
}

第二步：在index.html里面引入这个config.js

<script src="./static/js/config.js"></script>

第三步：我们配置好之后就可直接调用

export  const baseURL1 = window.g.baseURL1
export  const baseURL2 = window.g.baseURL2  

方法二

2.1 第一步：在 static 文件夹中新建一个 project.config.json，把你要写的配置写入

{
    "baseURL1": "http://localhost:8090",
    "baseURL2": "/api",
    "company": "XXXXX"
  }

2.2 第二步：在 main.js 中请求定义的配置文件，并放到 Vue.prototype 中，使全局可访问，注意，这里把new Vue()放在请求里执行，是防止请求与页面渲染之间的时间差异化导致值获取不到，因此这样比较保险。

// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
  axios.get('/static/project.config.json').then((res) => {
    // 基础地址
    Vue.prototype.BASE_URL = res.BASE_URL;

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

startApp()

2.3 第三步：如果在 .vue 文件中使用：

console.log(this.BASE_URL)

2.4 如果在一些 .js 文件中，可以调用Vue后再使用：

    import Vue from 'vue'
    console.log(Vue.prototype.BASE_URL)