vue实现不同服务器代理,接上篇,虽然可实现多版本代理,但是每增加一种模式就需要重下新修改vue.config.js以及.env.dev.local,感觉很不智能,扩展性挺差。
,模仿vue中.env。当地的文件,此文件被git忽略,且可根据当前环境变量加载不同的数据,由此在项目根目录下新建发展文件夹,在发展文件加下建立配置文件夹,用户放置配置文件,配置下目前暂有两个文件config.development.local config.owndev.local
在.gitignore中添加
<代码>/config/发展config.local
<代码>/config/config . *发展。local
忽略所有的配置当地文件,然后通过节点读取文件加载配置的json文件,并将代理规则通过代码完善,导出代理规则,最终输出的vue.config.js中实现代理,通过cross-env模块改变系统变量设置,最终实现不同环境下不同文件的加载
其中发展为新添加目录,其中主要放置需要代理的文件
配置下
。gitignore添加对文件的忽略
开发/config/config.local
开发/config/config . *。local
开发/配置下的config.development.dev
{
“/api”:“http://serverurl”
}
开发/配置下的config.owndev.dev
{
“/api/登录”:“http://localhost: 8080”,
:“/api/注册http://localhost: 8081”
}
proxy.js实现主要的代理逻辑,思路如下,根据cross-env设置的环境变量加载不同的json文件
cross-env用法,在<代码>包。json代码中<代码> devDependencies> npm我——save-dev cross-env>
" devDependencies ": {
:“cross-env ^ 5.2.0”
}
用法在启动vue服务前添加<代码> cross-env BUILD_ENV=发展>
如下
"脚本":{
“服务”:“cross-env BUILD_ENV=发展vue-cli-service服务”,
:“owndev cross-env BUILD_ENV=owndev vue-cli-service服务”,
}
当执行<代码> npm运行服务> process.env。BUILD_ENV> npm运行owndev>
proxy.js实现的主逻辑如下:
var=路径要求(“路径”);//系统路径模块
var fs=要求(fs);//文件模块
const defaultProxy={
“/api”:“http://serverUrl”
};//根据当前的运行环境判断走哪个配置
const发展="发展"
让currentEnv=process.env.BUILD_ENV& # 63; process.env.BUILD_ENV:发展
让configPath=' config/配置。$ {currentEnv}。local '
让filePath=路径。加入(__dirname configPath);//文件路径,__dirname为当前运行js文件的目录
让proxyContent=零;//读取json文件,异步/* fs。readFile (filePath“utf - 8”,函数(呃,数据){
如果(!犯错){
proxyContent=数据;
}
}); *///将json字符串转化为json对象
尝试{
proxyContent=JSON.parse (fs.readFileSync (filePath“utf - 8”))
}捕捉(e) {
proxyContent=defaultProxy
}
如果(proxyContent==null) {
proxyContent=defaultProxy
}
让代理={}//遍历所有的配置代理,对应不同的服务器
Object.getOwnPropertyNames (proxyContent)。forEach(函数(关键){
让定位路径=proxyContent(例子)
让proxyItem={};
proxyItem。目标=定位路径;
proxyItem。ws=true;
proxyItem。changeOrigin=true;
proxyItem。pathRewrite={}
proxyItem。pathRewrite[' ^ ${关键}']='/'
代理(例子)=proxyItem
}）;
模块。=出口代理
在vue.config.js中引用该文件
让代理=要求(“。/开发/代理/代理”)
让配置={
publicPath:“/?
devServer: {
端口:8080
代理:代理
}
}
模块。=出口配置
以上,完成。使用时只需更改<代码>开发/config/config.owndev.local 文件即可,即使增加了代理也可只增加配置文件完成代理。
以上所述是小编给大家介绍的vue配置文件实现代理v2版本的方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
