Vue打包后生成一个可修改接口地址的配置文件

港控/mmm° 2022-12-12 15:26 249阅读 0赞

先给几个参考：

[https://blog.csdn.net/cccdf\_jjj/article/details/99593533][https_blog.csdn.net_cccdf_jjj_article_details_99593533]  vue2.0中实现打包后可配置接口地址

[https://blog.csdn.net/qq\_41409679/article/details/84878642?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param][https_blog.csdn.net_qq_41409679_article_details_84878642_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param] vue2.0中实现打包后可配置接口地址

[https://www.jianshu.com/p/d11fb8dc10f3][https_www.jianshu.com_p_d11fb8dc10f3]  这个是vue3.0的(vue中实现打包后可配置接口地址)

感谢

再来贴我自己的代码：

**(普通版)第一步：在 static 静态文件中新建一个 serverconfig.js 文件，js 代码如下：**

window.global_url = {
    	Base_url: "https:www.rioyi.com:50000/inhouse" 
    };

注意是src下面的static文件夹 不是打包后dist里面的！

![20201008155825554.png][]

### vue-element-admin 在Public文件夹下面创建**static文件夹，js代码跟上面一样** ###

![20210329103431780.png][]

创建config**文件夹**

![20210723165851676.png][]

window.config = {
      VUE_APP_BASE_API: 'http://157.148.74.18:8010'
    }

**第二步：在 未打包的 index.html 中引入 static 文件夹下的 serverconfig.js 文件** （vue-element-admin：public/index.html）

**第三步：在需要的地方使用：(我是在单独的https里面或者main.js里面) **（vue-element-admin：request.js中引入）

var serverbaseUrl = window.global_url.Base_url;//生成一个可以修改服务器地址的配置文件
    console.log(serverbaseUrl,'serverbaseUrl')
    
    axios.defaults.baseURL = serverbaseUrl; //修改为配置的地址

**第四步：打包生成**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

**在我们打包之后 可以看到 config 文件会原样输出并没有被打包，部署人员可以直接通过该文件来修改config.js里面的接口地址就可以啦！**

**[https://www.jianshu.com/p/d11fb8dc10f3][https_www.jianshu.com_p_d11fb8dc10f3]  这个是vue3.0的(vue中实现打包后可配置接口地址)**

[https_blog.csdn.net_cccdf_jjj_article_details_99593533]: https://blog.csdn.net/cccdf_jjj/article/details/99593533
[https_blog.csdn.net_qq_41409679_article_details_84878642_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param]: https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
[https_www.jianshu.com_p_d11fb8dc10f3]: https://www.jianshu.com/p/d11fb8dc10f3
[20201008155825554.png]: /images/20221123/47569f4a2d5748dd8a88b52dcc912ea2.png
[20210329103431780.png]: /images/20221123/2a36c393469c472593531676c6e5b0d9.png
[20210723165851676.png]: /images/20221123/1dc3c47d50844742a18d3f6b1e9ffe28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221123/78f7dcb65d4048d49b1f6d4998be1acf.png