vue项目打包生成外部配置文件修改后端访问地址

最新推荐文章于 2024-08-13 16:09:45 发布

山谷里的杂货铺

最新推荐文章于 2024-08-13 16:09:45 发布

阅读量3.9k

点赞数 3

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_58528200/article/details/125601036

版权

前端打包需要向后台问一个接口访问地址，测试环境、生产环境都需要一个地址，每次打包时都要前端切换地址，感觉很麻烦，现在这个方法是打包后，在配置文件中修改地址。

1、在public 文件下新建一个config.js文件，并进行编辑

2、找到你请求接口的地方

const service = axios.create({
  baseURL: window.CONFIG.baseUrl,
  timeout: 10000
})

3、修改Index.html文件，引入config.js文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="text/javascript" src="./config.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>