Vue 不同环境配置相应的 API 地址

我使用的是 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 进行调用了，打包的时候，会读取不同的配置信息，这样是不是很方便。