vue-cli4+项目打包后生成可修改的配置文件

项目开发过程中，有一些数据需要我们动态去修改，开发过程中改起来还比较方便。但是项目上线后，在进行改动，还需要重新打包，这样一来二去就变得十分麻烦。下面已vue项目为例（其余项目同理），介绍异步跟同步的两种解决方案：

异步获取数据

创建免打包JSON配置文件文件

cli4+在public文件夹下面新建一个json配置文件，cli4版本以下则在static文件夹下新建即可

{
  "baseSize": 100,
  "autoLogout": 6900,
  "axiosConfig": {
    "withCredentials": true,
    "baseURL": "/api"
  }
}

引入配置文件

在main.js文件中请求config.json数据（我这里用的是axios），cli4版本以下请求路径为/static/config.json，具体看情况配置

axios.get("/config.json")
  .then(res => {
  	console.log(res.data)
  }

build查看效果

部署后直接修改config.json中的配置即可

同步获取数据

项目中有些支持异步配置变量，但也会遇到需要同步获取配置变量的情况，比如一段代码需要顺序执行，且依赖可配置变量，这样就需要用到同步配置变量的方法。实现原理跟异步一样，都是在静态文件夹下新建一个可配置文件。不同于异步的是，同步则采取将需要配置的信息挂到window全部变量上面，并通过index.html引入，从而通过window对象访问，达到同步的效果，具体操作如下：

创建免打包js配置文件文件

cli4+在public文件夹下面新建一个js配置文件，cli4版本以下则在static文件夹下新建即可

window._config = {
  "baseSize": 100,
  "autoLogout": 6900,
  "axiosConfig": {
    "withCredentials": true,
    "baseURL": "/api"
  }
}

引入配置文件

在静态文件夹下找到index.html，将创建的js文件通过script标签引入，加载时则执行js文件中的代码，将配置变量挂在window对象下面。这里说一下，为什么不在main.js中引用js文件，而在html文件中引用：

• 原生浏览器不支持import、require（不能在html中使用import、require）
• import、require打包后，会直接将值打包进js文件，而不是引用关系（原生浏览器也不支持，第一条）
• 通过script在html中引入js文件，在我们每一次刷新时，就会重新引用一次，这样修改js文件便生效了

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

使用

console.log(window._config);