vue2.x官方脚手架区分开发环境和生产环境

在工作中,使用vue2.x官方脚手架,需要根据开发环境和上生产环境,区分不同服务器的IP,这个改怎么处理

一、使用webpack 脚本,来区分使用的是"npm run dev" 还是 "npm run build",然后根据这个条件引入不同的配置信息即可

// 当前环境是否是开发环境
export const IS_DEV = process.env.NODE_ENV === 'development';

解释:

1、process模块允许你获得或者修改当前node进程的设置,不像其他的模块需要引入,process是一个全局进程(node主进程),你可以直接通过process变量直接访问它。

2、在webpack脚手架中,是动态添加了一个env.NODE_ENV这个属性值的,简单理解,process是一个大的JSON对象,添加了个人的属性而已

二、今天公司的架构师杨总提供了一个最简单的思路,即直接把配置信息作为index.html页面的一个JS文件直接引入,其余业务逻辑的页面交由webpack打包,打包内部的配置信息全部从引入的JS文件中获取

感悟:看问题看本质,需要把复杂的问题简单化,不要太专注于一点,应该跳出来看全局,让问题变得清晰简单。

相关推荐