别再使用一套配置啦🤔

前言

为什么我们要区分开发环境和生成环境，有很多开发包括我在内也只采用一套的配置😢，公用一套配置文件会有很多弊端，包括性能隐患、不停的修改配置、等等🤢。

  • 配置文件比较冗余，有很多配置我们在不同环境对应的配置是不相同的👀。
  • 每次提交测试的的时候每次都需要修改一下后台的链接地址🤔。

    开发环境与生产环境区别

开发环境配置

  • 模块热更新（本地开启服务，实时更新）
  • sourceMap (方便调试，定位问题)
  • 接口代理(配置proxyTable解决开发环境中的跨域问题)
  • 代码规范检查 (代码规范检查工具)

生产环境配置

  • 提取公共代码
  • 压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)　　　
  • 文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)　　　
  • 去除无用的代码　　　　

开发环境和生产环境的共同配置

  • 同样的入口
  • 同样的代码处理(loader处理)
  • 同样的解析配置

综上：我们有必要抽离出两种环境，来避免上面情况的发生🤞，由于我们的项目用的是@vue/cli 5.0.4所以我下面的内容都是针对@vue/cli💋

概念（引用官网）

模式是 Vue CLI项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式👇

  • development 模式用于 vue-cli-service serve🎨
  • test 模式用于 vue-cli-service test:unit🎨
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e🎨

当运行 vue-cli-service 命令时🎑，所有的环境变量都从对应的环境文件(下文会提到)中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式🎊。

通俗的来说：Vue CLI已经默认帮助我们做了开发环境和生产环境的区分🤷‍♀️，当我们执行vue-cli-service serve的时候就是开发环境🏓。执行 vue-cli-servie build的时候就生产环境⚽。并且NODE_ENV会被指定成对应的值，也就代表我们在全局可以通过使用process.env.NODE_ENV来判断是生产环境还是开发环境👏。

环境文件

你可以在你的项目根目录中放置下列文件来指定环境变量，如果在这些文件中指定了NODE_ENV会覆盖上方的NODE_ENV❤。

1
2
3
4
5
# [mode]：development|test|production
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

  • 一个环境文件只包含环境变量的“键=值”对。

    1
    2
    NODE_ENV=development
    VUE_APP_NOT_SECRET_CODE=some_value

    注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量🎶将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中😜,可以在客户端进行使用。这是为了避免意外公开机器上可能具有相同名称的私钥✔。

  • 加载环境文件的优先级

    1
    2
    3
    4
    # development：
     npm run serve: .env.development.local, .env.local, .env.development,.env
    # production：
     npm run build: .env.production.local, .env.local, .env.production,.env

如何查看vue.config.js中生产环境和开发环境的配置

1
2
3
4
5
# 开发环境：
npx vue-cli-service inspect --mode development >> webpack.config.development.js
# 生产环境：
npx vue-cli-service inspect --mode production >> webpack.config.production.js
# 在产生的 js 文件开头，添加：module.exports =然后格式化即可查看。

环境搭建

  • 通过vue-cli搭建一个空项目

    1
    vue create env_project

  • 在app.vue的mounted生命周期中增加如下代码

    1
    2
    3
    4
    5
    if (process.env.NODE_ENV == "development") {
      alert("开发环境");
    } else if (process.env.NODE_ENV == "production") {
      alert("生产环境");
    }

  • 运行 npm run serve

  • 生成dist打包文件 

    1
    npm run build

  • 下载nginx

  • 下载安装完成之后修改nginx配置文件conf->nginx.conf 指定打包文件

  • 启动nginx

找到nginx的安装目录双击nginx.exe

  • 访问127.0.0.1

综上：我们应该已经将生产环境和开发环境区分开了，可以根据不同环境修改不同的配置了🎈。

创建环境文件指定不同配置

在与vue.config.js的同级目录创建.env.development 与 .env.production并在.env.development中写入如下内容👇

1
2
# 实际项目千万不要在development中定义NODE环境为production，我们是为了验证是否可以覆盖默认的环境
NODE_ENV = production
  • 重启项目

总结

综上我们既然清楚了开发环境和生产环境的区分文中提到的问题也就迎刃而解啦🎨,生产环境和开发环境在每种语言中都是必须要知道的，希望你看完之后会有帮助哦🤣，如果使用的是vue-cli2.0可以看这里✌。

参考文献

技术
代码人生 Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！谢谢