vue-cli 创建的 vue 项目的模式与环境

最新推荐文章于 2024-04-26 16:30:08 发布

或许不该一蹴而就

最新推荐文章于 2024-04-26 16:30:08 发布

阅读量224

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_50823463/article/details/130027056

版权

模式与环境区分

以 vue-cli-service serve 脚本启动应用，process.env.NODE_ENV 的值为 development。

以 vue-cli-service build 脚本启动应用，process.env.NODE_ENV 的值为 production。

通过 cross-env，把脚本改成如下样子，就能通过 VUE_APP_DEV、VUE_APP_PROD 判断是开发还是生产环境。

还可以通过 dotenv 在不同模式（test、pre、prod）下定义不同的环境变量。

注意：cross-env 和 dotenv 的文件里定义的变量名，必须是 BASE_URL 或以 VUE_APP_ 开头。

  "scripts": {
    "dev:test": "cross-env VUE_APP_DEV=true VUE_APP_PROD=false NODE_ENV=development vue-cli-service serve --mode test",
    "dev:pre": "cross-env VUE_APP_DEV=true VUE_APP_PROD=false NODE_ENV=development vue-cli-service serve --mode pre",
    "dev:prod": "cross-env VUE_APP_DEV=true VUE_APP_PROD=false NODE_ENV=development vue-cli-service serve --mode prod",
    "build:test": "cross-env VUE_APP_DEV=false VUE_APP_PROD=true NODE_ENV=production vue-cli-service build --mode test",
    "build:pre": "cross-env VUE_APP_DEV=false VUE_APP_PROD=true NODE_ENV=production vue-cli-service build --mode pre",
    "build:prod": "cross-env VUE_APP_DEV=false VUE_APP_PROD=true NODE_ENV=production vue-cli-service build --mode prod"
  }