记vue/uniapp本地调试以及部署代理服务器设置哪些事
接触vue差不多也一年有余，很多概念性的东西都不懂，逐步已经习惯了npm来安装，之前其他同事做的一些项目，npm自己拿过来也踩了很多坑，比如换个环境再npm就跑不起来了等等之类的，遇到最多的就是scss，less版本的问题。但是今天主要说的不是这个问题，而是在调试的时候以及部署的时候的跨域的问题，之前有写过这个文章《php跨域代码，欣达CMS专用版》，然并卵用，实际实施的时候还是报跨域的错误，经过一番研究和总结，整理代码代码如下：
首先是环境判断，是h5还是小程序或者APP，然后配置api接口地址，针对uniapp
const apiUrl = process.env.VUE_APP_PLATFORM === 'h5' ? '/api' : (runMode === 'dev' ? devUrl : finalUrl);
针对vue普通项目
const apiUrl = process.env.NODE_ENV === 'development' ? '/api' : (runMode === 'dev' ? devUrl : finalUrl);
定义apiUrl，如果运行环境是h5，不管runMode（自定义常量）是正式环境还是开发环境，接口都是/api，假如访问地址是：http://localhost:81，那么接口地址就是http://localhost:81/api，如果访问是正式环境：http://m.demo.xcwl.com，那么接口地址就是http://m.demo.xcwl.com/api，然后要怎么来实现对应的测试地址就能访问到对应的api地址呢？这就用到了代理服务器的概念，首先是本地状态：
针对uniapp，在manifest.json配置文件中，源码试图，在h5：配置中，加入以下代码（在"h5":{}这个花括号里面加）
"devServer" : {
"disableHostCheck" : true,
"port" : 81,
"proxy" : {
"/api" : {
"target" : "http://demo.dev.xinda.pro/api/v1/",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/api" : ""
}
}
}
},自己需要修改的地方：
1、port，端口号，针对h5配置中的端口号设置，
2、target，目标地址，也就是API借口的实际地址。
针对vue（使用webpack）：在webpack配置文件中找到devServer项目，如果没有就自己新增，因为可以各种引用，所以不确定具体位置，如果使用HBuilderX建立的VUE项目，那么只需要修改config\index.js文件中proxyTable选项，
proxyTable : {
"/api" : {
"target" : "http://demo.dev.xinda.pro/api/v1/",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/api" : ""
}
}
}如果经过搜索没有devServer配置选项，那么就需要加入
"devServer" : {
"disableHostCheck" : true,
"port" : 81,
"proxy" : {
"/api" : {
"target" : "http://demo.dev.xinda.pro/api/v1/",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/api" : ""
}
}
}
},这段代码，同样的要注意端口号和目标地址。
在正式环境，需要部署代理服务器，
配置如下：
location ^~/api {
proxy_pass http://app.demo.xcwl.com/api/v1;
}
location / {
try_files $uri $uri/ /index.html;
}第一段是代理服务器的设置
第二段是防止在history模式下，直接访问报404的错误，不过需要主要的是，如果是bt面板里面直接开的子站，不要外面的location / {}，只要里面的：try_files $uri $uri/ /index.html;即可，否则保存时报错。
大白话写的，小白应该都能看懂吧。
