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

  • 相关阅读:
    背水一战 Windows 10 (26)
    背水一战 Windows 10 (25)
    背水一战 Windows 10 (24)
    背水一战 Windows 10 (23)
    背水一战 Windows 10 (22)
    背水一战 Windows 10 (21)
    背水一战 Windows 10 (20)
    背水一战 Windows 10 (19)
    背水一战 Windows 10 (18)
    背水一战 Windows 10 (17)
  • 原文地址:https://www.cnblogs.com/sunsie/p/7251027.html
Copyright © 2011-2022 走看看