vue打包之后生成一个动态修改接口的配置文件 vue-cli3.0

vue打包之后生成一个动态修改接口的配置文件 vue-cli3.0

1. 使用vue-cli3.0脚手架，在项目根目录下的public文件夹下新增static文件夹，在static文件夹下新增config.js文件
   
2. 在config.js文件中添加一个全局的window对象，代码如下：

//config.js
window.apiObj = {
  apiUrl:'http://192.100.5.106',
  apiName: '网段地址',
  apiArea: '这个地址是用于商品列表功能'
}

3. 在public目录下的index.html中引入这个config.js文件
   
   
4. 在组件中直接使用这个window对象就可以了，不需要再引入文件了，我是在App.vue中使用这个对象的，代码如下：

<template>
  <div id="app">
    <h1>{{apiNameData}}:{{apiUrlData}}</h1>
  </div>
</template>

<script>
//这里将window对象apiObj的属性：apiUrl和apiName展示在页面上
var apiUrl = window.apiObj.apiUrl
var apiName = window.apiObj.apiName
export default {
  name: 'app',
  data() {
    return {
      apiUrlData: apiUrl,
      apiNameData: apiName
    }
  }
}
</script>

5. npm run build 打包后，在浏览器中展示：
   
   修改IP地址为：http://192.100.5.113，浏览器显示如下：

好了，以上就是我的记录