vue使用webpack.DefinePlugin实现环境变量

2018-11-01  本文已影响0人  令狐铁蛋

使用场景:使用于vue项目中,开发环境和生产环境使用不懂得api地址;如果使用vue-cli创建的项目,已经配置好了一个变量,使用示例如下:

let baseurl;
if (process.env.NODE_ENV === 'development') {
    baseurl = 'http://api.development.com';
} else {
    baseurl = 'http://api.production.com';
}
export default baseurl;

DefinePlugin

DefinePlugin 允许创建一个在编译时可以配置的全局常量。对开发环境和生产环境使用不同的配置非常有用。如在开发环境中输出日志,在生产环境中不输出日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发和发布构建的规则。

new webpack.DefinePlugin({
  // Definitions...
});

用法

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object')
});
上一篇 下一篇

猜你喜欢

热点阅读