我们在打包VUE项目的时候通常会使用npm run build命令。但是我们经常要打包测试环境与生产环境，然而在打不同环境的包时候，某些配置项是不同的。我们每次通过手动来修改的话会非常繁琐。如果需要手动修改的地方过多的话，难免会有遗漏。
目前我参与开发的项目就有3种不同的环境需要处理

1. 本地开发环境npm run dev
2. 服务器测试环境npm run build:stage
3. 生产环境npm run build:prod
   可以看到，除了本地开发环境用的是dev本地预览，其他两个打包命令都加上了后缀。我们就是通过后缀的命令来区分不同的打包环境。

这里我使用vue-cli3的脚手架环境进行演示。
首先vue里面配置node.js全局变量的文件是单独的一个.env文件。这里我们创建三种不同环境的.env文件。

.env.development      // 开发环境
.env.production       // 生产环境
.env.testproduction   // 测试环境

文件创建好了放到vue项目的根目录即可（一定要注意文件名前面是有“.”的）。
创建好了文件，我们在文件里面写上配置。这里以Axios的不同环境调用的接口做演示，其他部分举一反三

# 标记
NODE_ENV = 'production'

# base api
VUE_APP_BASE_API = 'https://foo.foo.com'

这里解释一下。
NODE_ENV这个是用来标记当前的环境是什么，等会儿会在vue里面用到
下面的VUE_APP_BASE_API定义了一个接口的常量，等会儿也会用到。
根据不同的环境写好配置文件以后，我们找到项目的package.json配置
在scripts里可以看到build配置。
我们把配置改为我们写好的三个

"dev": "vue-cli-service serve --mode development",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode testproduction",

这里主要是注意后面增加了--mode xxxxx这些参数
这个参数的作用是node根据我们刚刚创建的.env文件去编译里面的变量，让我们系统可以用。xxxxx是.env.后面的名称

准备好这些以后，我们在VUE里面就可以使用process.env.NODE_ENV来判断当前的环境了。
我在封装的axios里面，增加了一个switch判断，根据process.env.NODE_ENV判断当前的环境
然后把api定义为VUE_APP_BASE_API即可。这样我们可以通过命令去打包不同的环境，而且每次打包也不用重新去更改接口了。
其他配置基本是一致的，都是通过判断不同的环境获取到不同的配置而已

今天在新电脑拉git分支的时候发现，项目死活也跑不起来。后来发现以前改了文件名的大小写，但是git默认是对文件名的大小写不敏感的，所以更改文件名的所有文件都没有提交到git上面。
通过命令

git config core.ignorecase false

把默认的忽略大小写关闭，然后提交代码，搞定！

这个问题大部分时间是在微信浏览器遇到的问题。其实也只是让浏览器滚动一下就好了。所以我们可以直接在dom上添加

onblur="window.scrollTo(0,0)"

例子

<input type="text" value="" id="mobile" placeholder="请输入电话号码" onblur="window.scrollTo(0,0)" />

这样可以让浏览器滚动到最顶部，解决这个问题

在使用了CDN加速后，原来的域名需要使用CNAME解析到CDN提供的加速域名上面去，但是这里会出现一个问题。
由于CNAME解析过后，微信无法验证IP，导致微信JSSDK授权失效。
我们也没有办法一个一个去把CDN的服务器IP获取到，然后添加到IP白名单里。
所以，谁有更好的方法解决这个问题呢？（先记录一下吧，如果我找到了办法再更新。如果看到这篇文章的朋友有办法，欢迎留言）
换了一种思路，既然不能直接使用CDN的域名加速，那么我们是否可以把VUE打包过后的除去index.html之外的所有文件都放到OSS上，然后使用OSS的CDN加速来达到我们的目的呢？答案是可以的！

- 阅读剩余部分 -

现在大部分网站已经进入了https时代。对于前后端分离来说，大部分使用的是Nginx进行反向代理。
准备工作如下：

1、申请好ssl证书
2、获取到证书的prm跟key文件
3、如果DV证书是泛解析的话申请证书的时候，需要使用*.xxxx.com这种形式申请。

进入找到Nginx的配置文件
这个是80端口的jian'ting

server {
         listen 80;
         server_name www.xxxx.com;
         return      301 https://$server_name$request_uri;      //这是nginx最新支持的写法，可以301直接重定向到https进行访问
    }

接下来是https的访问

 server {
         listen 443;
         server_name www.xxxx.com;
         #指定PEM格式的证书文件（如果是windows服务器的话，比如C盘下面文件夹直接可以写成c:/cer/xxxxxxxx.pem这种形式）
         ssl_certificate      /etc/nginx/xxxxxxxx.pem;  
         #指定PEM格式的私钥文件 
         ssl_certificate_key  /etc/nginx/xxxxxxxx.key; 
    }

配置好以后niginx -s reload重启一下nginx就可以使用https访问了
最后，如果不行的话，看一下服务器的端口443是否开启，云服务器的端口白名单443端口是否开启。没有开启的话开启即可