关于 vue 项目抽离配置文件

问题

在开发vue项目的过程中，一般我们所有的js代码写好后，都是经过 webpack 合并打包成项目依赖文件。

这样导致了一个问题，假如我们只是需要更改项目中的api请求地址，那么我们也要修改代码后重新打包再更新，这样很麻烦。

我们可以抽离出一个项目的配置文件。

创建项目配置文件

假设我们使用最新的 vue-cli 3 生成vue项目，目录结构如下

项目目录

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

这里，我们利用 public 下的静态资源不会经过 webpack 打包处理的原理，在 public 下面创建js文件夹，里面创建一个 gloablConfig.js

image.png

// gloablConfig.js

 window.g = {
   baseUrl: 'http://app.api.com',
   debug: true
 }

我们可以创建一个全局变量对象，并且可以往里面添加项目需要的属性
这样我们在项目代码中就可以通过创建的全局变量访问到api地址

const BASE_URL = window.g.baseUrl;

export default {
    defaultURL: BASE_URL
}

从 index.html 中引入配置文件

最后从 index.html 通过script标签直接引入配置js，实现我们抽离配置文件的目的。
这样我们需要更新api地址的时候就可以直接修改项目打包后的静态资源里的globalConfig.js 文件

image.png