美文网首页
vue使用webpack.DefinePlugin实现环境变量

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

作者: 令狐铁蛋 | 来源:发表于2018-11-01 16:56 被阅读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 的键值都是一个标志符或者多个用 . 连接起来的标志符。

    • 如果这个值是一个字符串,它会被当作一个代码片段来使用。
    • 如果这个值不是字符串,它会被转化为字符串(包括函数)。
    • 如果这个值是一个对象,它所有的 key 会被同样的方式定义。
    • 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object')
    });
    

    相关文章

      网友评论

          本文标题:vue使用webpack.DefinePlugin实现环境变量

          本文链接:https://www.haomeiwen.com/subject/yxmxxqtx.html