博客

①方法一 在 manifest.json文件下，设置h5的proxy代理配置，配置方式和vue比较类似。

配置参考：

https://cli.vuejs.org/zh/config/#devserver-proxy

		"h5": {
		"optimization": {
				"treeShaking": {
						"enable": true
				}
		},
		"devServer": {   
			"disableHostCheck": true,  
			"proxy": {  
				"/api": {  
					"target": "https://xxxapi3.com",
					"changeOrigin": true,   
					"secure": false,
					"pathRewrite": {
							"^/api": "/"  
					}  
				},
				"/app": {
					"target": "https://xxxapi2.cn",
					"changeOrigin": true,
					"pathRewrite": {
						"^/app": "/app"
					}
				},
				"/pla": {
					"target": "https://xxxapi3.cn",
					"secure": false,
					"changeOrigin": true,
					"pathRewrite": {
						"^/pla": "/pla"
					}
				}
			}  
		}  
	},

②方式二

如果是使用vue-cli脚手架的方式搭建的项目。可以在vue.config.js文件目录下设置h5的proxy代理配置,相比于在manifest.json配置有以下优势：

1、可以在js文件中添加注释，json文件中不支持

2、js文件支持动态解析，可以根据不同环境引入不同参数。

"use strict";
module.exports = {
  // #ifdef H5
  devServer: {
    proxy: {
      '/app/': {
        secure: false,
        // target: 'https://abags.cn',
        target: 'https://abcs.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/app': '/app'
        }
      }
    }
  },
  // #endif
};

注意：manifest.json的配置优先,会强制覆盖vue.config.js中的配置，所以只需要在vue.config.js中配置即可。