背景

用 vue-cli 构建的项目通常是采用前后端分离的，需要将后台接口地址打包进项目中。当然还有一些其它全局性的配置，会打包进项目中。但打包后无法修改，需要在源码中修改再重新打包，这太麻烦了

解决

注意：在 public 目录下的文件或文件夹【 除了 index.html 】，在打包过程中一般不会做处理

  1. 在 public 目录下新建 config.js 文件

    1
    2
    3
    4
    5
    window.config = {
        baseURL : "/es", // 服务器地址
        timeout: 10000, // 请求超时时间
        webappcode: '' // 站点编码，示例 D01
    }

  2. 在 public 目录下 index.html 中引入 config.js 文件

    1
    <script type="text/javascript" src="./config.js"></script>

  3. 在使用的地方，直接使用

    1
    2
    3
    let baseURL = window.config.baseURL
    let timeout = window.config.timeout
    let webappcode = window.config.webappcode