vue配置开发环境和生产环境

在与src文件夹同级的地方增加两个文件

.env.development
.env.production

配置development和production两个文件

在.env.development中写：

NODE_ENV = development
VUE_APP_NUM = dev //VUE_APP_自己取名字

在.env.production中写：

NODE_ENV = production
VUE_APP_NUM = pro //VUE_APP_自己取名字

然后在package.json中配置：
修改的地方是：
“build-development”: “vue-cli-service build --mode development”,
“build-production”: “vue-cli-service build --mode production”,

{
  "name": "54_front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build-development": "vue-cli-service build --mode development",
    "build-production": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  。。。。
}

App.vue中验证：

在App.vue中写下：

  mounted() {
    console.log(process.env.VUE_APP_NUM, "VUE_APP_NUM");
  }

然后npm run serve

会输出在控制台输出 dev VUE_APP_NUM

打包程序：

开发环境构建：

npm run build-development

这个命令将使用.env.development 文件中的配置进行构建，通常用于测试或开发阶段。

生产环境构建：

npm run build-production

这个命令将使用.env.production 文件中的配置进行构建，用于准备最终部署到生产环境的代码。

在开发环境保留console.log，在生产环境去除console.log

在src文件夹中增加一个文件console.js

if (process.env.NODE_ENV === 'production') {
  console.log = function () {} // 覆盖所有打印语句
  console.warning = function () {}
  console.dir = function () {}
  console.error = function () {}
}

引入main.js

import '@/console.js' // 去掉打印语句