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

时间:2022-12-19 14:58:16

第一种方法

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

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

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

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

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

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

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

修改为

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

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

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

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",
}
在代码中可以这样使用
vue-cli 利用 webpack 给生产环境和发布环境配置不同的接口地址的三种方法

第三种方法:

在webpack.config.js中使用DefinePlugin:

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

在代码中:

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

 

 
 

 

 

 



 

请使用手机"扫一扫"x