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

最新推荐文章于 2023-07-27 15:00:30 发布

GothaM24

最新推荐文章于 2023-07-27 15:00:30 发布

阅读量929

点赞数

分类专栏： VUE webpack 文章标签： vue webpack

本文链接：https://blog.csdn.net/qq_35593965/article/details/106250493

版权

VUE 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

前言：

我们用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文件，针对不同服务地址就可以随意更改该配置文件了

祝大家生活快乐，完~

GothaM24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue+webpack打包生成可配置文件-后台服务地址

前言：我们用vue/cli + webpack 启动前端，后台服务的地址配置会写在/config/dev.env.js和/config/prod.env.js文件中，当项目打包执行build后会把这两个文件打包需求：最近项目规范走CI持续构建，自动化构建，一个构建结果可能用于多个环境，比如测试环境、研发环境、演示环境、生产环境等，为了保证前端包的一致性和保存打包记录，本地打黑包是不合适了，下面记录下生成可配置的serveConfig文件方法：第一步在/static文件夹下新建serveConfig
复制链接

扫一扫