当前位置:首页 > 编程教程 > vue技术文章 > vue配置文件实现代理v2版本的方法

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

  • 发布时间:
  • 作者:码农之家
  • 点击:191

这篇文章主要知识点是关于vue、配置文件、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js实战
Vue.js实战高质量扫描版
  • 类型:Vue大小:196.7 MB格式:PDF作者:梁灏
立即下载

Tags:Vue 配置文件 

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模块改变系统变量设置,最终实现不同环境下不同文件的加载

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

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

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

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

config下

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

.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版本的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.960788

详解vue2.0脚手架的webpack 配置文件分析

前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介、安装我们不在这里赘述,对它还不熟悉的同学可以直接访问 vue-cli 查看 目录结构 .├── README.md├── build│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── config│ ├── dev.env.js│ ├── index.js│ └── prod.env.js├── index.html├── package.json├── src│ ├── App.vue│ ├── assets│ │ └── logo.png│ ├── components│ │ └── Hello.vue│ └── main.js└── static 本篇文章的主要关注点在 build - 编译任务的代码 config - webpack 的配置文件 package.json - 项目的基……

网友NO.966346

vue-cli脚手架config目录下index.js配置文件的方法

此文章介绍vue-cli脚手架config目录下index.js配置文件 1、此配置文件是用来定义开发环境和生产环境中所需要的参数 2、关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3、上代码 // see http://vuejs-templates.github.io/webpack for documentation.// path是node.js的路径模块,用来处理路径统一的问题var path = require('path')module.exports = { // 下面是build也就是生产编译环境下的一些配置 build: { // 导入prod.env.js配置文件,只要用来指定当前环境,详细见(1) env: require('./prod.env'), // 下面是相对路径的拼接,假如当前跟目录是config,那么下面配置的index属性的属性值就是dist/index.html index: path.resolve(__dirname, '../dist/index.html'), // 下面定义的是静态资源的根目录 也就是dist目录 assetsRoot: path.resolve(__dirname, '../dist'), // 下面定义的是静态资源根……

网友NO.673106

详解vue-cli 2.0配置文件(小结)

上次给大家分享的是用vue-cli快速搭建vue项目,虽然很省时间和精力,但想要真正搞明白,我们还需要对其原理一探究竟。 大家拿到一个项目,要快速上手,正确的思路是这样的: 首先,如果在项目有readme.md的情况下,大家要先读readme,项目的一些基本介绍,包括项目信息、运行的脚本、采用何种框架,以及项目维护者等信息通常都会有。一般在git上维护的项目都会有readme.md,不熟悉markdown语法的同学可以先了解下markdown入门。 第二步,要看package.json。现代的前端项目中通常都会有package.json文件。在package.json里,会介绍项目名称、版本、描述、作者、脚本、依赖包,对环境的要求,以及对浏览器要求。 { "name": "uccn", "version": "1.0.0", "description": "uccn3.0", "author": "v_yangtianjiao v_yangtianjiao@baidu.com", "private": true, // 这里的脚本是分析项目的主要入口 "scripts": { ……

网友NO.720048

vue-cli配置文件——config篇

最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查阅了很多相关的文章,所以也想出几篇关于vue-cli配置的东西。正所谓“工欲善其事必先利其器”嘛!这一篇主要是分析vue中关于 config文件夹中的相关代码 ; 首先我们先看一下config的文件结构: |-config|---dev.env.js|---index.js|---prod.env.js 打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件, “dev.env.js” , “index.js” , “prod.env.js” ,我们先打开prod.env.js的文件,看里面的内容: 'use strict'module.exports = { NODE_ENV: '"production"'} prod.env.js的内容非常简单,仅仅是导出了一个对象,里面写明了执行环境是“production(生产环境)”;我们接下来看与之对应的“dev.env.js”文件: 'use strict'//引入webpack-merge模块const merge = require('webpack-merge')//引入刚才打开的prod.env.jsconst prodEnv = require('./prod.……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757