vue-cli 利用 webpack 给生产环境和发布环境配置不同的接口地址的三种方法

Posted 2020-09-30 sunsie

第一种方法：

在/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