如何使用特定的 .env.development 文件构建 vue 应用程序答案

【问题标题】：How to build vue app with specified .env.devlopment file如何使用特定的 .env.development 文件构建 vue 应用程序
【发布时间】：2019-12-12 07:14:59
【问题描述】：

我有一个 vue.js 应用程序，我想使用 .env.development 文件构建它。

我在 package.json 文件中使用这个脚本

"scripts": {
    "serve": "vue-cli-service serve --mode=local",
    "build": "vue-cli-service build",
    "dev-build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
},

当我运行脚本时

npm run dev-build

它使用 .env.development 构建文件，但构建文件大小太大，接近 15mb 但是当我运行脚本时

npm run build

它使用 .env.production 构建文件，大小减小到 1mb。

如何使用 .env.development 构建应用程序，但创建生产环境的构建大小

【问题讨论】：

将.env.* 与另一个构建选项混合使用不是一个好习惯。如果您有两种情况下都应该使用的通用选项，则可以使用.env 文件

标签： vue.js vue-cli

【解决方案1】：

docs 定义了模式之间的区别：

NODE_ENV=development 创建一个启用 HMR (Hot Module Replacement) 的 webpack 配置，不会散列资产或创建供应商捆绑包，以便在运行开发服务器时快速重新构建。

因此，不创建供应商捆绑包本身最终会在您的输出中产生更大的结果。简而言之，没有任何实用的方法可以让 development 变得像 production 一样小——它有一些原因，比如更快地响应变化等等。

【讨论】：