vue-cli 自定义交互式命令环境及多配置打包

最新推荐文章于 2024-08-19 12:39:10 发布

yazhiShaw

最新推荐文章于 2024-08-19 12:39:10 发布

阅读量699

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_39357177/article/details/107066145

版权

本文介绍如何使用vue-cli创建自定义交互式命令，实现针对测试和生产环境的多配置打包。通过修改package.json添加新命令，创建不同环境的.env文件设置变量，确保在测试和生产环境中process.env.NODE_ENV的正确识别。打包后，根据process.env.VUE_APP_TITLE判断接口地址，以适应不同环境的API调用。

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

用vue-cli跑项目的命令：

npm run serve 是不压缩文件，直接加载源码，并且此时的process.env.NODE_ENV是 development

npm run build 命令会打包代码，并且此时的process.env.NODE_ENV是 production

因此在发送请求的时候通过process.env.NODE_ENV就能很好的区分要请求的后端接口路径

但是最近遇到一个问题，我想要打包之后的代码分成测试环境和生产环境，但是通过npm run build打包之后的process.env.NODE_ENV统一都是production，就无法区分了，小朋友你是否有很多问号，接下来就说一下我的解决方案八

1.在package.json中，添加一句打包到测试环境的命令

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "test": "vue-cli-service build --mode test",
  },

2.在根目录创建.env.test和.env.build文件（文件名的后缀要和package.json中配置mode的一样，开头统一为.env），增加变量VUE_APP_TITLE，注意变量名必须