doc---vue-cli脚手架项目问题总结（14）——vue项目中的各种配置问题

本文链接：https://blog.csdn.net/qq_38185872/article/details/105534316

##、vue-cli的proxyTable配置跨域请求接口数据
例如：请求的接口为：http://192.168.0.241:8087/tradeController/tradeListByItem?item=6
target：设置为：http://192.168.0.241:8087/
changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。

proxyTable: {
   '/list': {
      target: 'http://192.1168.0.241:8087/',//设置你调用的接口域名和端口号 别忘了加http
      changeOrigin: true,
      pathRewrite: {
        '^/list': '/' //这里理解成用‘/list’代替target里面的地址，后面组件中我们掉接口时直接用list代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/list/user/add’即可        }
   }
},

在这里插入图片描述
请求数据的时候：list就是指http://192.168.0.241:8087/

##、vue-cli配置生产环境和发布环境配置不同的接口地址
config/dev.env.js中加入（BASE_URL是自己命名的，后面的值根据config/index里面配置的跨域的重写路径名称）
在这里插入图片描述

config/prod.env.js中加入（BASE_URL是自己命名的，后面的值是线上项目的访问的前缀）
在这里插入图片描述

设置之后，一定要重启环境，npm run dev才可以拿到参数

在项目访问数据中这样写，就能根据当前的环境判断是开发环境还是生产环境，从而自动更改开发和生产环境中的前缀，不用频繁更改。
在这里插入图片描述
代替：–》

##、项目中文件的简介路径的配置设置

配置之后可以在项目里面引入使用：
在项目js中使用的时候就可以用

import echartMinXin from 'mixin/echartMixin'

替换

import echartMinXin from './template/mixin/echartMinXin'

在这里插入图片描述
Html中使用（一定记得加 ~ 号，否则路径错误）

<img src="~assets/images/headerIcon/closeSearch@2x.png" width="20" alt="">

注意事项，设置好引用路径，必须要重启项目才能生效。不然会报错