cross-env自定义变量

最新推荐文章于 2024-08-12 09:02:55 发布

Yoo前端

最新推荐文章于 2024-08-12 09:02:55 发布

阅读量1.5k

点赞数 1

分类专栏： webpack 文章标签： webpack 前端 cross-env node.js

本文链接：https://blog.csdn.net/qq_43277404/article/details/120902111

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在webpack配置中使用cross-env进行环境变量管理，以实现针对不同客户项目的定制化打包。通过在package.json中添加自定义脚本，并在vue.config.js中配置webpack的DefinePlugin，可以方便地在打包过程中区分不同公司的标识，如`build:A`, `build:B`, `build:C`等。

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

接上文继续学习webpack的其他知识与技巧：

上文：webpack自定义配置
在这里插入图片描述

前言：之前我们对package.json中的serve 和 build进行了区分（有疑惑的朋友可以点击上方的超链接查看上篇），可以理解为是运行和打包配置的自定义。
那运行与运行之间，打包与打包之前的自定义该如何区分呢？

--package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
}

以上是vue-cli搭建的默认配置，在实际开发中常常需要一个系统可定制化，这就可能需要不同的指令来运行或者打包不同的静态资源，比如对A 客户的项目打包A页面，对B客户的项目打包B页面。

我们以build举例要达到以下的效果：
现在假设：TYPE是标识不同公司的标识项

"scripts": {
  "serve": "vue-cli-service serve",
  "build:A": " TYPE=A vue-cli-service build",
  "build:B": " TYPE=B vue-cli-service build",
  "build:C": " TYPE=C vue-cli-service build",
  "lint": "vue-cli-service lint"
}

当然直接这样写是没有用的

这里就要引入cross-env了

cross-env

安装

npm i cross-env --save

cross-env有一个默认的环境变量：NODE_ENV:一般用于区分生产和开发环境

"serve": "vue-cli-service serve",
"serve:test": "cross-env NODE_ENV=development  VERSION=1 vue-cli-service serve "

以上有一个VERSION=1 与NODE_ENV不同的是这是一个自定义变量需要配置：

配置方法：
新建一个vue.config.js
在这里插入图片描述

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    VERSION: '"' + process.env.VERSION + '"',
                  }
            })
        ],
 }
}