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

CoXie 发布于2019-08-23 18:14 / 1392人阅读

摘要：实现不同服务器代理接上篇，虽然可实现多版本代理，但是每增加一种模式就需要重下新修改以及，感觉很不智能，扩展性挺差。使用时只需更改文件即可，即使增加了代理也可只增加配置文件完成代理。

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文件即可，即使增加了代理也可只增加配置文件完成代理。

云服务器 GPU云服务器透明代理 v2ray VUE实现webrtc Vue实现分页 vue+webrtc实现实时视频通话,语音通话

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104882.html

用 Vue 全家桶二次开发 V2EX 社区

摘要：一开发背景为了全面的熟悉技术栈，结合的开放开发了这个简洁版的。在线预览来自官方以及的整理。当页面刷新后也无法显示，请查看控制台的异步请求是否返回。一、开发背景为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈，结合V2EX的开放API开发了这个简洁版的V2EX。在线预览 API来自官方以及djyde的整理。在线访问请节制使用，跨域是通过Nginx配置反向代...

shiguibiao 2019-08-20 16:36 评论0 收藏0
实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

摘要：说起，其实早在出现之前，网页就是在服务端渲染的。二服务器渲染如此快有部分原因来自，但是排除这部分，还是比浏览器端要快至少几倍。当然，我们可以考虑首屏采用服务端渲染的方式，因为完全服务端渲染会考虑到很多问题，比如复杂均衡等等等 Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vu...

GeekGhc 2019-08-20 15:19 评论0 收藏0
微豆 - Vue 2.0 实现豆瓣 Web App 教程

摘要：微豆一个使用与重构豆瓣的项目。在中的配置代理重新启动，打开查看结果是否与直接请求豆瓣相同。更多请参考豆瓣电影文档。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。微豆 Vdo 一个使用 Vue.js 与 Material Design 重构豆瓣的项目。项目网站 http://vdo.ralfz.com/ GitHub https:...

cjie 2019-08-20 15:11 评论0 收藏0
Vue全家桶实现还原豆瓣电影wap版

摘要：豆瓣电影版用全家桶仿写豆瓣电影版。原计划仿写完所有页面，碍于豆瓣的接口有限，实现页面也有限。由于公开的豆瓣接口具有访问次数限制，克隆到本地体验效果更加端访问已设置宽度适配。 douban-movie(豆瓣电影wap版) 用vue全家桶仿写豆瓣电影wap版。最近在公司项目中尝试使用vue，但奈何自己初学水平有限，上了vue没有上vuex，开发过程特别难受。于是玩一玩本项目，算是对相关...

Near_Li 2019-08-20 16:00 评论0 收藏0
跨域解决方案（易懂，持续更新中……）

摘要：跨域总结跨域思路跨域解决方案一般分为两种前端解决，后端解决前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发一下，其实就是反向代理，比如想要访问豆瓣的接口很，但是如果请求的是就不存在跨域反向代理就是截取之后重写请求将请求转发跨域总结 1.跨域思路跨域解决方案一般分为两种：前端解决，后端解决 1.1 前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发...

wupengyu 2019-07-25 14:24 评论0 收藏0