process.env打包参数

如果遇到process is not defined

那么可以在webpack的配置文件中，引入webpack包，并new webpack.DefinePlugin

 new webpack.DefinePlugin可以搭配merge使用,可以new两次,只是属性名不能相同,会报冲突

const webpack = require('webpack');


     new webpack.DefinePlugin({
        // webpack自带该插件，无需单独安装
        // 将属性转化为全局变量，让代码中可以正常访问
        "process.env": {
          tk: 66,
        },
        //字符串需要用JOSN.stringify或'"aaabbbxxx"'两次引号表示,否则编译完就是变量
        kuhahah: JSON.stringify("dsadas"),
        ssd: 12366,
        //上述ssd就是全局变量了
      }),

package.json无需改动

 展示结果 

 vue-cli增加参数

官方资料:模式和环境变量 | Vue CLI

 vue-cli中增加--mode development

之后新建.env.development文件,写入

也可以--mode cdma,那么新建文件名就是.env.cdma 

 最后调用

process.env.VUE_APP_AA
就会得到foo111

自己搭配的webpack

 注意自定义参数撰写的位置,强烈建议写在NODE_ENV=development后面,如果写在其他地方,会被其他命令干扰.

调用:

process.env.khg
就会得到kocdma

create-react-app

新建

.env.development和.env.production 

以REACT_APP_开头即可，例：

使用

process.env.REACT_APP_SO

如果要给webpack打包时加参数,可以用--env,但modele.export时需要用函数形式

​​​​​​​