vue配置文件实现代理v2版本的方法

 更新时间:2019年06月21日 09:52:03   作者:蓦然回首  
这篇文章主要介绍了vue配置文件实现代理v2版本的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

vue实现不同服务器代理,接上篇,虽然可实现多版本代理,但是每增加一种模式就需要重下新修改vue.config.js以及.env.dev.local,感觉很不智能,扩展性挺差。

主要实现思路:

 模仿vue中.env.local文件,此文件被git忽略,且可根据当前环境变量加载不同的数据,由此在项目根目录下新建development文件夹,在development文件加下建立config文件夹,用户放置配置文件,config下目前暂有两个文件 config.development.local config.owndev.local

在.gitignore中添加

development/config/config.local

development/config/config.*.local

忽略所有的配置local文件,然后通过node读取文件加载配置的json文件,并将代理规则通过代码完善,导出代理规则,最终输出的vue.config.js中实现代理,通过cross-env模块改变系统变量设置,最终实现不同环境下不同文件的加载

现新建项目,目录结构如下:

其中development为新添加目录,其中主要放置需要代理的文件

config下

.gitignore 添加对文件的忽略

development/config/config.local
development/config/config.*.local
development/config 下的config.development.dev
{
  "/api":"http://serverurl"
 }
development/config 下的config.owndev.dev

{
  "/api/login":"http://localhost:8080",
  "/api/register":"http://localhost:8081"
}

proxy.js实现主要的代理逻辑,思路如下,根据cross-env设置的环境变量加载不同的json文件

cross-env 用法,在package.json devDependencies中添加 ,然后npm i --save-dev cross-env即可

"devDependencies": {
 "cross-env": "^5.2.0"
 }

用法 在启动vue服务前添加 cross-env BUILD_ENV=development 即可

如下

"script":{
  "serve": "cross-env BUILD_ENV=development vue-cli-service serve",
  "owndev": "cross-env BUILD_ENV=owndev vue-cli-service serve",
}

当执行npm run serve process.env.BUILD_ENV 值为development,当执行 npm run owndev时,process.env.BUILD_ENV的值为 owndev

proxy.js实现的主逻辑如下:

var path = require('path'); //系统路径模块
var fs = require('fs'); //文件模块
const defaultProxy = {
 "/api":"http://serverUrl"
};
//根据当前的运行环境判断走哪个配置
const DEVELOPMENT = "development"
let currentEnv = process.env.BUILD_ENV?process.env.BUILD_ENV:DEVELOPMENT
let configPath = `config/config.${currentEnv}.local`
let filePath = path.join(__dirname, configPath); //文件路径,__dirname为当前运行js文件的目录
let proxyContent = null;
//读取json文件,异步
/*fs.readFile(filePath, 'utf-8', function(err, data) {
 if (!err) {
  proxyContent = data;
 } 
});*/
//将json字符串转化为json对象
try{
proxyContent = JSON.parse(fs.readFileSync(filePath,'utf-8'))
}catch(e){
proxyContent = defaultProxy
}
if(proxyContent == null){
 proxyContent = defaultProxy
}
let proxys = {}
//遍历所有的配置代理,对应不同的服务器
Object.getOwnPropertyNames(proxyContent).forEach(function (key) {
 let targetPath = proxyContent[key]
 let proxyItem = {};
 proxyItem.target = targetPath;
 proxyItem.ws = true;
 proxyItem.changeOrigin = true;
 proxyItem.pathRewrite = {}
 proxyItem.pathRewrite[`^${key}`] = '/'
 proxys[key] = proxyItem
});
module.exports = proxys

在vue.config.js中引用该文件

let proxy = require('./development/proxy/proxy')
let config = {
 publicPath:"/" ,
 devServer: {
  port: 8080,
  proxy:proxy
 }
}
module.exports = config

以上,完成。使用时只需更改 development/config/config.owndev.local文件即可,即使增加了代理也可只增加配置文件完成代理。

总结

以上所述是小编给大家介绍的vue配置文件实现代理v2版本的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue3中的setup使用和原理解析

    vue3中的setup使用和原理解析

    这篇文章主要介绍了vue3的setup的使用和原理解析,通过本文我们学习了 setup 函数执行的过程及 Vue 是如何处理捕获 setup 的返回结果的,需要的朋友可以参考下
    2022-09-09
  • Vue3中样式渗透:deep()无效的原因分析

    Vue3中样式渗透:deep()无效的原因分析

    今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习,这篇文章主要介绍了Vue3中样式渗透:deep()为什么无效,需要的朋友可以参考下
    2022-11-11
  • vue element 中的table动态渲染实现(动态表头)

    vue element 中的table动态渲染实现(动态表头)

    这篇文章主要介绍了vue element 中的table动态渲染实现(动态表头),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue在原窗口与新窗口打开外部链接的实现代码

    Vue在原窗口与新窗口打开外部链接的实现代码

    这篇文章主要介绍了Vue如何在原窗口与新窗口打开外部链接,文中给大家提到了vue跳转外部链接的实现代码,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 关于vue组件的更新机制 resize() callResize()

    关于vue组件的更新机制 resize() callResize()

    这篇文章主要介绍了关于vue组件的更新机制 resize() callResize(),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • electron+vue 实现静默打印功能

    electron+vue 实现静默打印功能

    这篇文章主要介绍了electron+vue 实现静默打印功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue视频播放暂停代码

    vue视频播放暂停代码

    今天小编就为大家分享一篇vue视频播放暂停代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue实现Base64转png、jpg图片格式

    Vue实现Base64转png、jpg图片格式

    这篇文章主要给大家介绍了关于Vue实现Base64转png、jpg图片格式的相关资料,前段获取生成的是base64图片,需要转化为jpg,png,需要的朋友可以参考下
    2023-09-09
  • vue组件发布到npm简单步骤

    vue组件发布到npm简单步骤

    给大家讲解一下vue组件发布到npm简单方法和步骤过程,需要的朋友一起学习参考一下。
    2017-11-11
  • vue实现可改变购物数量的购物车

    vue实现可改变购物数量的购物车

    这篇文章主要为大家详细介绍了vue实现可改变购物数量的购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论