如何在启动 Vue 程序之前读取本地静态文件内容

有这样一个需求，就是希望通过本地的 Json 文件来写销袜入一些内容，比如请求后端接口的 API 前缀，我们在 public 目录下面新建一个 project.config.json 文件来做一些配置项：

这样有一个好处就是项目打包发布之后的文件也可以通过更改这个静态文件来改变一些配置项，省的因为频繁更改配置，而需要重新打包

然后我们在程序的主文件 main.js 中来通过请求这个静态文件，然后将读取悔基的结果存在 Vue 的全局属性亏前激 $config 下面

那么接下来我们还需要在 Vue 程序实例化之前就执行 getConfig() 方法 ，这样才能确保我们在请求后端接口的时候能提前拿到 API 的 baseUrl

是不是很灵活，应该还有很多的场景能够用到该方法。

首先，vue项目有两个地方可以存放静态资源。一个是assets文件夹，一个是static文件夹（地址栏输入static可以直接访问）。放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。而assets内的资源会被webpack打包,比如图片,会被转为BASE64。为了兼顾图片资源优化，所以还是不适合把图片资源放到static。

而当我们把这些资源放入assets文件夹厅搏时，当引入的图片是背景图片时，会报错隐伏派。

这个时候，还需配置 build =>util.js 里找到 ExtractTextPlugin.extract 增加一行： publicPath: '../../' ，主要解决背景图片路径的问题。

这样改动的原因是Vue打包完成的目录结构中，js/css文件灶贺与static目录的层级差了2级

---