Vue 不同环境配置 API 地址

我使用的是 Vue + ElementUI 进行构建的项目，在开发过程中，使用的是前后端分离的模式，所以经常会出现多环境配置信息，尤其是 Api 接口地址的配置，如果在代码中使用判断的方式，感觉不友好。

如果你使用的是 webpack，下面我来介绍一种方法可能会帮助到你：

使用 DefinePlugin 来根据不同的环境设置不同的配置信息，具体参考

在 build 目录下面找到

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

如果你有更好的方法，请在下面评论中留言。

©版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 & 作者信息。

End