版本环境: vue2.x + vue-cli4 + webpack4x
如果是只是修改一个变量的值, 那简单暴力的方法就是去打包之后对应的文件里面去修改值。但是这种方法 太暴力, 不安全;
1. 可以单独创建一个配置文件.js 或者.json, 该配置文件不需要经过打包处理 , 所以我们可以直接放到static 文件夹下, 如果没有的话 ,就在public 下创建一个 ; 如下图所示
在config.js 中 将所需要的变量挂载到window上 或者 直接挂载到一个全局变量上
// 自定义变量 挂载上window上
window.customVariables = {
baseURL: 'http://192.20.96.52:8050//vc_manage_server111111'
}
或者
// 自定义变量 直接挂载到一个全局变量上
var customVariables = {
baseURL: 'http://192.20.96.52:8050//vc_manage_server111111'
}
同时需要在index.html 中引入config.js;
然后在需要的地方中直接使用 比如 axios 的baseURL :
打包之后的文件 中该属性就可以动态获取到了
2. webpack 打包使用插件generate-asset-webpack-plugin, 自动生成所需要的配置文件
其实这个插件从名字就可以看出, 他的主要作用就是不需要我们手动生成配置文件, 会自动生成一个文件
1) 安装 npm install generate-asset-webpack-plugin --save-dev
2)在vue.config.js 中 进行配置
const createServerConfig = function (compilation) {
let config = {
baseURL: "http://192.20.96.52:8050/xxxx",//接口地址
};
return JSON.stringify(config);
}
module.exports = {
chainWebpack(config) {
config.plugin('GenerateAssetWebpackPlugin')
.use(require('generate-asset-webpack-plugin'))
.tap((args) => {
return [
{
filename: 'config.json', // 最终生成的文件名称
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
}
]
})
}
}
3) main.js 中引入 axios 或者 项目中使用的自己封装的axios
我这边引入的是封装过的axios , 异步获取上述的json 文件
import request from './utils/request'
// 异步获取
request.get('config.json').then(res => {
console.log('获取到配置文件的内容====', res)
// 可以挂载到Vue原型,也可以使用localStorage 、
Vue.prototype.baseURL = res.data.baseURL
request.defaults.baseURL = res.data.baseURL // 修改 baseURL
})
// 要查看下自己封装的axios 是否有其他处理, 避免json 文件请求的时候 没有返回
// response 返回拦截器
service.interceptors.response.use(async res => {
if (res.config.url == 'config.json') {
return res;
} else {
return responseHandle(res)
}
},
error => {//
return Promise.reject(error)
}
)