zoukankan      html  css  js  c++  java
  • vue-cli 利用 webpack 给生产环境和发布环境配置不同的接口地址的三种方法

    第一种方法

    在/config/dev.env.js下配置如下

     在/config/prod.env.js下配置如下

    已经分别设定路径,接下来就是如何调用的问题了。

    原来api文件里代码如图所示

    修改为

    然后就完成了我们的配置工作。最后,重启项目,就能使新配置的接口地址生效了。

    在经过这样的配置之后,我们在运行

    npm run dev

    的时候,跑的就是开发环境的接口。而我们运行

    npm run build

    打包项目的时候,打包的是服务器正式接口,我们就不用调来调去得了。

    第二种方法:

    可以使用 "cross-env": "^3.1.3" 这个库.

    在 package.json 中同样需要两个命令:

    "scripts": {
      "dev": "cross-env NODE_ENV=developmentHot node tasks/runner.js",
      "pack": "cross-env NODE_ENV=developmentPack node tasks/runner.js",
    }
    在代码中可以这样使用

    第三种方法:

    在webpack.config.js中使用DefinePlugin:

    if (process.env.NODE_ENV !== 'developmentHot') {
      webpackConfig.plugins.push(
        new webpack.DefinePlugin({
          __DEFINE_XXX__: JSON.stringify(true)
        })
      )
    }
    在代码中

    在代码中:

    
    
     
     


    请使用手机"扫一扫"x

  • 相关阅读:
    CA 证书和数字证书
    PHP获取不了内网IP?
    站点速度检测工具
    Mac地址
    交互机和路由器区别
    关于实体店收银系统和cookie实现登录状态
    Python3 的序列
    Python3 字符串格式化
    Python3 的元组
    Python3 的列表
  • 原文地址:https://www.cnblogs.com/sunsie/p/7251027.html
Copyright © 2011-2022 走看看