vue项目打包生成可以修改后端url ip相关配置文件

vue项目npm run build打包后会生成一个dist文件，我们有时候需要一个配置文件来更改所有请求ip地址，如果没有这个配置文件，我们就需要每次在项目代码中更改，然后再打包，这样就很麻烦，所以可以选择用一个配置文件来更改打包后的url，方法步骤如下：

一、在public文件夹下创建serverConfig.json文件，写入配置：

image.png

image.png

二、在src下的main.js里写入代码

import axios from "axios";
// 请求公共封装ip地址
let startApp = function() {
  axios
    .get("./../public/serverConfig.json")
    .then((res) => {
      // 基础地址
      Vue.prototype.VUE_APP_BASE_API = res.data.VUE_APP_BASE_API;
      console.log(Vue.prototype.VUE_APP_BASE_API);
      new Vue({
        el: "#app",
        router,
        store,
        render: (h) => h(App),
      });
    })
    .catch((error) => {
      console.log(error);
    });
};

startApp();

就是去请求serverConfig.json的数据，然后把VUE_APP_BASE_API存在全局变量中，每次调用去全局中取

三、在.vue文件中使用

直接this.VUE_APP_BASE_API使用即可

四、在.js文件中使用

Vue.prototype.VUE_APP_BASE_API

五、打包

npm run build会生成dist文件，配置文件serverConfig.json在dist目录下，更改即可生效