在进行打包Vue项目生成dist或build时的小细节

问题：

在我们进行Vue项目打包的时候，只需要运行 npm run build即可自动生成dist或者build文件夹如下图。

dist里面包含了一个static文件夹，在这里面是打包之后的js文件，css文件，fonts文件，img文件等

这样我们就可以把打包好的项目部署到服务器上面运行了，但是这里会有一个小问题。如果运行的时候，需要对代码进行修改的话，例如修改里面接口请求的地址；这样就要去原来的项目里面进行修改，然后再重新打包，再部署。这样就会很麻烦，繁琐。

问题产生的原因:

在我看来，打包就是相当于压缩操作，会尽可能的压缩体积，缩小内存。这样就会导致代码出现混乱，格式不对等等情况。通过直接修改dist文件夹中的文件来达到修改代码并且满足预期效果几乎是不可能的。但是我们又不想去在源代码中修改，这样又要重新打包，重新部署。

解决办法:

我们可以在原有项目的public里面创建一个单独的config.js文件夹，里面可以写一些关于项目的公共配置项，例如定义一个数据请求的接口地址 const baseUrl={url:'http://localhost:8080'}

然后我们再在项目的唯一HTML文件 index.html里面进行引入对应的路径，这里用<script src="./config.js"></script>来引入即可。这个html文件可以引入一些公共的js文件，或者一些在线的字体图标等，都会在项目里面生效，这是可以直接拿来使用的。

例如，这里的baseUrl我们就在需要使用的文件中直接使用，baseUrl.url就是相当于http://localhost:8080了直接可以使用了。

这样的好处是，后续如果要修改代码的话，我们可以直接在config.js里面直接进行修改即可。js文件可以直接选择txt打开方式打开，直接修改保存即可。不用再重复修改，重新部署了。