##、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="">
注意事项,设置好引用路径,必须要重启项目才能生效。不然会报错