<strong id="348029ef"></strong>
       
       
       




    1. 
         
         
         


    2. 狗万官网酒店 > 狗万官网下载 > vue配置文件实现代理v2本版的主意_vue.js

      vue配置文件实现代理v2本版的主意_vue.js

      来源: 2019-08-04 19:43 我来投稿 参与评论
      这篇文章主要介绍了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本版的主意,瞩望对大家有所帮助,如果大家有其他问题请给我留言,小编会适时回复大家的。在此也突出感谢大家对脚本的师网站的支持!
      如果你认为本文对你有帮助,迎接转载,烦请注明出处,谢谢!

      义务编辑:狗万官网酒店
       
       
      0% (0)
       
       
      0% (0)
      机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
      地名: 匿名?