vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

Posted 2020-10-27 Mr.Zhang Blog

废话不多说，直接进入正题，此文以配置不同的接口域名地址为例子

项目根目录下有一个config文件夹，基础项目的话里面至少包括三个文件，

1.dev.env.js

2.index.js

3.prod.env.js

我们需要做配置的就是第一个和第三个。

其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件，那么打开dev.en.js，开发环境。原本代码如下：

‘use strict‘
const merge = require(‘webpack-merge‘)
const prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
})　　

然后我们配置一个BASE_API,在页面上加一行代码，如下

‘use strict‘
const merge = require(‘webpack-merge‘)
const prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  BASE_API: ‘"https://www.baidu.com"‘,
})

然后，我们编辑prod.env.js文件，生产环境，原本代码如下

‘use strict‘
module.exports = {
  NODE_ENV: ‘"production"‘,
}　　

在此文件基础上，加一行代码，更改后如下

‘use strict‘
module.exports = {
  NODE_ENV: ‘"production"‘,
  BASE_API: ‘"https://www.baidu.com"‘,
}　　

最后，

// 配置API接口地址
var root = process.env.BASE_API　　

这个时候root就是公用的base变量了，可以直接访问接口的时候这样写：root+"api/home"　而且这个变量会根据环境 自动发生调整，打包的时候 会自动改成线上地址。

也可以在main.js里对这个变量进行全局配置。

Vue.prototype.$URL = process.env.BASE_API;