我使用的是 Vue + ElementUI
进行构建的项目,在开发过程中,使用的是前后端分离的模式,所以经常会出现多环境配置信息,尤其是 Api
接口地址的配置,如果在代码中使用判断的方式,感觉不友好。
如果你使用的是 webpack
,下面我来介绍一种方法可能会帮助到你:
使用 DefinePlugin
来根据不同的环境设置不同的配置信息,具体参考
在 build
目录下面找到
webpack.dev.conf.js
webpack.prod.conf.js
# webpack.dev.conf.js
...
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
'process.api': "'http://www.dev.com/'" // 注意这里的写法
})
]
...
# webpack.prod.conf.js
...
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
'process.api': "'http://www.prod.com/'" // 注意这里的写法
})
]
...
按照上面方式配置完毕之后,之后你就可以在项目中使用 process.api
进行调用了,打包的时候,会读取不同的配置信息,这样是不是很方便。