uni-app学习07 在H5上运行_uni-app h5配置

跨域配置

模板位置：https://cli.vuejs.org/zh/config/#devserver-proxy 右侧导航栏vue.config.js - devServer.proxy，在target处修改。

// 跨域配置---位置 vue-cli官网上
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        ws: true,
        changeOrigin: true,
		pathRewrite:{
			"^/api":""
		}
      },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

修改base.js文件

使用代理

/* 
	base.js
	公共接口配置
 */

const base ={
	//host:'http://localhost:8088',// 基础域名--小程序
	host:'/api',//基础域名--H5
	indexData:'/store/getStoreList',//首页接口
}

export default base
1
2
3
4
5
6
7
8
9
10
11
12

在HbuilderX上运行

效果

tips

• 修改了home.vue中的导航栏的部分样式，确保H5页面上导航栏显示正常

  .item{
  		//flex: 1;
  		display: inline-block;
  		margin: 10rpx;
  		color: #9b9b9b;
  	}
  1
  2
  3
  4
  5
  6

• 修改了request.js文件，引用base.js，修改url，使主页的引用更加简洁

  import base from './base.js'
  export default function(url,method='Get',data={},options={loading:true}){//传参时按顺序传
  	return new Promise((resovle,reject)=>{
  		//交互动画
  		if(options.loading){
  			uni.showLoading({
  				title:"数据加载中"
  			})
  		}
  		uni.request({
  			url:base.host+url,
  			method,
  			data,
  			success:res=>{
  				if(res.data.status===200){
  					uni.showToast({
  						title:"数据加载完毕"
  					})
  				}
  				resovle(res.data)
  			},
  			fail:error=>{
  				reject(error)
  			},
  			complete() {
  				// 成功或失败都执行
  				uni.hideLoading()
  			}
  		})
  	})
  }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32

• 主页home.vue引用修改

  let res = await request(base.indexData)
  1