vue项目配置打包测试环境/生产环境

我会带着你远行 2023-09-30 13:24 8阅读 0赞

## vue项目配置打包测试环境/生产环境： ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16]  
开发环境运行命令：`npm run serve`  
生产环境打包命令：`npm run pro`  
测试环境打包命令：`npm run build`

--------------------

## 步骤： ##

### 1.项目中添加一个配置ip的js文件，比如如下的ip-config.js（位置不重要） ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_19_color_FFFFFF_t_70_g_se_x_16]

### 2.在生成axios实例的时候引入，封装baseUrl ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 3.在main.js中全局引入封装号的axios ###

import http from "@/utils/request";
    Vue.prototype.$http = http;

### 4.在项目中即可使用 ###

为了接口的可维护性，一般会把`url`提出来写到`js`中，在`vue`中引入当变量传给封装好的`$http`  
`get`：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
`post`：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 5.在package.json中配置打包环境 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
注意：`--mode`后面的值代表配置`ip`时的名称，要一致；至于前面的键名，可自定义，符合规范就好

提示：一般来说，开发环境是开发人员自己运行的，不需要配置打包（build）；同理，其他环境也不需要配置运行（serve）

--------------------

## 总结： ##

*写博客是为了记笔记！*

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b452ef7c46ca42b5bcedfd6c1c645856.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZGo5bCP55uX,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ecb4055892844a7eba1c9b4d9806ab49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZGo5bCP55uX,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/17880d7b516a4863895979a1f844ad30.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZGo5bCP55uX,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/1c971d416e074a5593b4cfd87b653e66.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZGo5bCP55uX,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/ad158272b43f44898b660f6e0cd3d5ba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZGo5bCP55uX,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGo5bCP55uX_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/109c6aef9c014f2b96cba90531cd4ba9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZGo5bCP55uX,size_20,color_FFFFFF,t_70,g_se,x_16