vue项目打包后，自由修改配置如接口地址等

背景描述：

项目打包后，如果想更换接口域名或者项目名称，就需要再次打包。但是这样子操作有点耗费时间。
如果把这些配置写到一个文件中，然后在index.html文件中引入使用，这样子会大大提高工资效率，节省不少时间。
亲测有效~~

操作流程：

1.先在 vue项目中的 public文件夹中新建一个js文件，例如 config.js
  //config.js文件
  window.gobalUrl = {
    //dev环境
    VUE_APP_URL: 'xxxx',
    VUE_APP_SOCKET_URL: 'xxx'
    //qa环境
    // VUE_APP_URL: 'xxxx',
    // VUE_APP_SOCKET_URL: 'xxxx'
    //prod环境
    //VUE_APP_URL: 'xxxx',
    //VUE_APP_SOCKET_URL:'xxx'
  }

2.然后在index.html文件中引入该文件
  <script src="./config.js"></script>

3.页面中使用
  例如封装的axios文件中
  baseUrl:{
    apiUrl: window.gobalUrl.VUE_APP_URL,
    websocketUrl: window.gobalUrl.VUE_APP_SOCKET_URL
  }
这样子就大功告成了~~

注意：

如需修改接口域名，将项目npm run build打包后，直接打开dist文件，找到config.js文件，然后打开，把对应的环境域名注释打开即可。包上线成功后，刷新浏览器查看验证即可。

参考链接：

https://blog.csdn.net/weixin_45943869/article/details/127632921

https://www.jianshu.com/p/93cdd4f336d9

巴特西

vue项目打包后，自由修改配置如接口地址等

最新文章

热门文章