VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用

当在开发和产品上线的时候,我们经常会遇到在同一个地方由于环境的不同而地址也不同的情况,这时候如果在代码中将该地址写死,那势必会造成上线时手动改动,多人开发及多处使用该地址难以维护等一系列问题,为避免这一问题,我们需在配置文件中分别配置该常量。

一、找到VUE项目中的配置文件:

     1.dev.env.js(开发环境);

     2.prod.env.js(生产环境)。

二、打开文件后配置参数(该处以分别配置两个环境下的参数'ROOT'为例):

     1.在dev.env.js文件中

       VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用

     2.在prod.env.js文件中

       VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用

      配置好之后,我们就可以在项目中引用了。

三、打开项目中的文件,就可使用该参数,

     var root=process.env.ROOT;

四、重启项目。