在与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' // 去掉打印语句