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

前端打包需要向后台问一个接口访问地址，测试环境、生产环境都需要一个地址，每次打包时都要前端切换地址，感觉很麻烦，现在这个方法是打包后，在配置文件中修改地址。1、在public 文件下新建一个config.js文件，并进行编辑 2、找到你请求接口的地方3、修改Index.html文件，引入config.js文件 4、dist包只要修改dist包下的config.js文件的url就可以了...

山谷里的杂货铺

3997人浏览 · 2022-07-04 15:33:28

山谷里的杂货铺 · 2022-07-04 15:33:28 发布

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

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>

4、dist包

只要修改dist包下的config.js文件的url就可以了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^