vue+webpack打包生成可配置文件-后台服务地址

前言:

我们用vue/cli + webpack 启动前端,后台服务的地址配置会写在/config/dev.env.js和/config/prod.env.js文件中,当项目打包执行build后会把这两个文件打包

需求:

最近项目规范走CI持续构建,自动化构建,一个构建结果可能用于多个环境,比如测试环境、研发环境、演示环境、生产环境等,为了保证前端包的一致性和保存打包记录,本地打黑包是不合适了,下面记录下生成可配置的serveConfig文件方法:

第一步

在/static文件夹下新建serveConfig.js文件

//serveConfig.js
window.g = {
     
  AXIOS_TIMEOUT: 10000,
  BASE_URL: "https://www.ckotham.com:1234/user"
}

第二步

在index.html文件中引入新建的serveConfig.js文件

//index.html
<body>
    <div id="app"></div>
    <script src="./static/serveConfig.js"></script>
</body>

第三步

在接口设置文件中将defaul.baseURL修改成serveConfig.js文件的BASEURL

import axios from 'axios'
//引入路由
const http = axios.create()
http.defaults.baseURL = window.g.BASE_URL;//核心代码 其他忽略
//http.defaults.headers.common['Authorization'] = getToken() || ''
// 请求拦截器
http.interceptors.request.use((config) => {
     
    // 设置请求时间,或者在传入参数中设置
    config.timeout = config.timeout || 30000
    return config;
}, (error) => {
     
    // 对请求错误做些什么
    console.log(error)
});
// 添加响应拦截器
http.interceptors.response.use((res) => {
     
    // 对响应数据做点什么
    return res.data;
}, (error) => {
     
    // 对响应错误做点什么
    console.log(error)
});
export default http

然后执行npm run build 在/static文件夹下会有一个serveConfig.js文件,针对不同服务地址就可以随意更改该配置文件了

祝大家生活快乐,完~

你可能感兴趣的:(VUE,webpack,vue,webpack)