dev和prod环境

Daotin 于 2022-02-09 发布 编辑
  1. process.env
  2. webpack 开发和生产的区别

process.env

process对象用于处理与当前进程相关的事情,它是一个全局对象,可以在任何地方直接访问到它而无需引入额外模块。 它是 EventEmitter 的一个实例。

process.env 获取当前系统环境信息的对象,常规可以用来进一步获取环境变量、用户名等系统信息:

console.log(process.env);
console.log('username: ' + process.env.USERNAME);
console.log('PATH: ' + process.env.PATH);

webpack 开发和生产的区别

开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。

开发环境(development)和生产环境(production)的构建目标差异很大。

在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。

而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。

由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。

package.json配置

"scripts": {
    "serve": "vue-cli-service serve",  // 正常启动dev模式服务
    "serve:test": "vue-cli-service serve --mode test", // 启动test服务
    "serve:prod": "vue-cli-service serve --mode production", // 启动prod服务,
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode developmenet",
    "build:uat": "vue-cli-service build --mode uat",
    "build:test": "vue-cli-service build --mode test",
    "build:k8s": "vue-cli-service build --mode k8s && node script/deleteMap.js",
    "build:gray": "vue-cli-service build --mode gray && node script/deleteMap.js",
    "build:prod": "vue-cli-service build --mode production && node script/deleteMap.js",
    "lint": "vue-cli-service lint",
    "fix": "vue-cli-service lint --fix src/**/*.*"
  },

serve:prod 一般用来验证,当生产环境出问题了,但是不好排查,就在本地起生产环境的服务看有没有问题。

(完)