Vue项目配置全局.env文件和cdn优化打包

项目配置（.env及分套配置）

项目有测试服和正式服两个，前阵子就想着把全局环境也分为两套，这样在开发中，打包测试服和正式服分开，避免混淆（因为出现过打包错了，测试服打包了正式服的东西。一直没有尝试，怕推上去把正式服搞炸了）

首先，大概讲一下，全局文件.env是干嘛用的以及分套的好处？名字显而易见，放全局变量呗，像接口api URL、APP_KEY等项目全局变量；测试服？正式服？那意味着他们的接口api URL 等信息并不相同啊，对的，以我们项目为例。

测试服在这里插入图片描述
正式服

显而易见，如果只有一个.env全局文件，那每次打包推测试服或正式服，都得改这个全局环境啊，好麻烦！有时还会不小心打包错了（本人经历），所以，搞两套（测试服一套，正式服一套）！

以如下方式命名，最好不要乱起名

.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件(测试服)
.env.production 生产环境下的配置文件（正式服）

  注意：.env（默认文件）中的全局属性会被其他带后缀的.env文件(如.env.development或.env.production)覆盖！

关于文件内容：注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX
关于文件的加载：根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以说“最好不要乱起名”

需要在packjson.json配置文件中配置指令
在这里插入图片描述

"build":"vue-cli-service build --mode development"，
即指向.env.development全局配置文件，里面是测试服配置

"build-pro":"vue-cli-service build --mode production",
指向.env.production全局配置文件，正式服配置

这样就好了，只需要在终端使用对应打包指令就可以打包到对应服务器配置，不用每次打包都得改一下配置，方便很多且不易出错！怎么跑？
上图，npm（那匹马） ……

测试服
在这里插入图片描述
正式服

cdn优化

是啥？
百度一下–> 内容分发网络（Content delivery network或Content distribution network，缩写：CDN）。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的（需要提过资源绝对地址告诉cdn厂商，让厂商去智能拉取）。

好了，不扯了。
直接说，前端项目为什么要搞吧。

基本上，前端项目会有很多静态文件，像Vue全家桶、UI库、图片、JS脚本……好多啊，如果都打包到服务器，那打包文件还挺大的，我们进网页加载不就慢了，为了提高体验感，这是一个优化的点！

把一些依赖文件、img、ui库等等，以cdn引入，这样项目打包后文件就会小很多，速度也就上来了。怎么配置？

1.到cdn网站（我用jsdelivr这个 https://www.jsdelivr.com/）查找加入（注意项目对应依赖文件的版本号！），生成链接

在这里插入图片描述

2.在前端项目vue.config.js配置文件中，对应配置（如果多的时候，可以分多条 js:[‘XXX’,‘XXX’,‘XXX’,…]，异步加载也比较快嘛，当然，也不能分太多条，太多网络请求也不好）

module.exports = {}中，配以下（注意：这里有命名规则的，键名：键值，如果键名中含有“-”，键名要加引号‘’。像import 键值 from 键名，要这样对应的）
在这里插入图片描述

3.在/public/index.html路径文件下，在里加上遍历cdn配置的东西