vue配置多环境下多个打包命令

大佩梨

已于 2023-12-05 14:24:28 修改

阅读量895

点赞数

分类专栏： vue.js 文章标签： vue.js 前端

于 2023-02-15 09:50:20 首次发布

原文链接：https://blog.csdn.net/weixin_44600358/article/details/126404376

版权

vue.js 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

文章介绍了如何在项目开发中管理不同环境的配置，通过创建.env文件来设置环境变量，如.env.dev和.env.pre，然后在package.json的scripts中定义不同的打包命令，如`build:dev`和`build:pre`，以便根据环境进行打包。此外，还提到可以在请求拦截器中使用这些环境变量，确保代码能适应不同环境的需求。

摘要由CSDN通过智能技术生成

当我们开发项目时不同环境在打包时还要修改不同的地址才能打包，即使你们公司有自动化部署平台但你每次上传gitee还需要改来改去的

我们对此可以配置不同的打包命令来控制此问题

1，在项目根目录下新建2个文件，.env.dev .env.pre 若你有多个环境还可以创建多个文件，

2，在项目的package.json文件中，把scripts对象的build字段的值改为以下代码，实际就是再添加npm run build:dev命令和npm run build:pre命令。

"scripts": {
 
"serve": "vue-cli-service serve",
 
"build": "vue-cli-service build --mode prod",
 
"build:dev": "vue-cli-service build --mode dev",
 
"build:pre": "vue-cli-service build --mode pre",
 
"lint": "vue-cli-service lint"
 
}

在这里插入图片描述
3.在.env.dev .env.pre 文件中定义请求地址变量以及相对静态文件地址的变量，或其他变量

4.定义的这些变量可以在项目中直接用process.env.变量获取

例如

if (process.env.NODE_ENV === 'production') { console.log('生产环境'); } 
else if(process.env.NODE_ENV === 'testing') { console.log('测试环境'); } 
else if(process.env.NODE_ENV === 'pre-release') { console.log('预发布环境'); }

5.可以请求拦截器里配置
在这里插入图片描述
6.最后可根据不同环境进行不同命令打包（npm run dev npm run pre）
感谢观看，有帮助的话点点赞点点关注谢谢哈。