【uniapp】解决uniapp h5 本地代理实现跨域访问及如何配置开发环境

 如何解决uniapp H5本地代理实现跨域访问？

1.第一种解决方法：

直接创建一个vue.config.js文件，并在里面配置devServer，直接上代码，重启跑项目

亲测有效

// vue.config.js
module.exports = {
    transpileDependencies: ['uview-ui'],
    devServer: {
		    proxy: {
		      '/api': {
		        target: 'https://rivtrust.jz-xxx.xyz/',
				changeOrigin: true,
		        pathRewrite: {
		          '^/apih5': ''
		        }
		      }
		    },
	}
}

 2.第二种解决方法：

在src目录下找到mainfest.json文件，修改该文件，点击“源码视图”看到h5

注意：如果打开“源码视图”后并没有找到关于h5的配置，这时可以点击“h5配置”，随便修改下配置，比如设置页面标题；再去打开“源码视图”后就会出现关于h5的配置。

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                 '/api': {
		            target: 'https://rivtrust.jz-xxx.xyz/',
				    changeOrigin: true,
		            pathRewrite: {
		              '^/apih5': ''
		            }
		          }
            }
        }
    }
}

接口调用时这么写：

 注意⚠️以上两种解决方法不能同时使用；第二种方案会覆盖第一种解决方法

3.还有一种无需配置：

使用HBuilder X 内置浏览器，不存在跨域问题，推荐使用

---

参考文章： 感谢以下作者

如何解决reuni-app踩坑+小改造 - 掘金

解决uniapp H5端跨域问题（proxy）_苦夏木禾的博客-CSDN博客

什么是跨域 | uni-app官网

uni-app的H5版使用注意事项 - DCloud问答

---

---

配置环境变量：

uni-app 项目中配置环境变量主要有如下三种方式：

vue-config.js

package.json

.env

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

• 在 HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
• cli 模式下，是通行的编译环境处理方式。

if (process.env.NODE_ENV === 'development') {
	console.log('开发环境');
} else {
	console.log('生产环境');
}

 多个环境变量如下：

参考文章： 

uniappH5开发环境搭建以及（开发，测试，生产）环境打包_码锋的博客-CSDN博客_uni_output_dir