vue.config.js配置代理不生效_iMac各种代理设置方法汇总

↑ 点击上方“子勰随笔”关注我    

写在前面

由于各种各样的墙的原因，导致日常开发中我们会遇到各种各样的因为网络的问题导致的不能访问、超时等问题。每次遇到都会去查一遍，很是费时，今天专门总结汇总一下。由于考虑到需要不停的切断是否使用，因此这里不再介绍设备全局代理的设置方式。

对于Mac环境，我们大部分时间都是使用命令行，因此代理配置相关的主要就是关于shell的代理配置。很奇怪shell命令行下配置的代理仅仅对shell相关的部分命令(例如wget等)生效，不是对整个机器生效(例如npm等还是要使用专门的代理)。当然也有可能由于公司网络异常复杂，因此会有各种代理配置，是别的代理配置的问题，引起代理在部分命令下没有生效。不管是什么原因，这里都总结一下相关命令的代理配置。

shell下的代理配置

配置方法

shell的网络代理有两种方法，一种是直接通过命令行配置，一种是直接设置在配置文件，在终端启动时自动加载。两种方法都是使用export设置环境变量的方式来实现，方法一致：

# 配置生效
export http_proxy='http://proxy.com:8080';
export https_proxy='http://proxy.com:8080';

# 删除配置
export http_proxy='';
export https_proxy='';

命令行配置事例

通过命令行可以完成网络代理的切换，包括代理添加、删除代理以及修改代理。具体事例如下

# 添加
➜  temp export http_proxy='http://proxy.com:8080';
➜  temp export https_proxy='http://proxy.com:8080';
# 查看
➜  temp echo $http_proxy $https_proxy
http://proxy.com:8080 http://proxy.com:8080
# 修改
➜  temp export https_proxy='http://test-proxy.com:8080';
# 查看
➜  temp echo $http_proxy $https_proxy
http://dev-proxy.oa.com:8080 http://test-proxy.com:8080
# 删除
➜  temp export http_proxy='';
➜  temp echo $http_proxy $https_proxy
http://dev-proxy.oa.com:8080
➜  temp export https_proxy='';
➜  temp echo $http_proxy $https_proxy

➜  temp

shell环境变量配置事例

如果是在环境变量中设置对应的参数，一般都是默认添加代理，然后当需要取消代理的时候再通过命令行使配置不生效。之所以已经有命令行的情况下还提供环境变量的设置是因为环境变量的配置会在每次shell终端启动时自动加载，因此不需要每次配置。目前个人使用的shell为zsh，因此以zsh的配置来说明。打开zsh的配置文件(默认为~/.zshrc),然后添加上面的代理配置即可，事例如下：

➜  temp tail ~/.zshrc
export FixVersion=0
export BuildNo=11
export SVN_REVISION=100

export https_proxy='http://proxy.com:8080';
export http_proxy='http://proxy.com:8080';

Android Studio 下的代理配置

Android开发中我们会用到两种模式，一种是直接IDE编译运行，一种是直接在命令行运行，两种场景下的代理配置并不一致。其中在命令行下运行时的代理配置与shell下的一致，因此不再专门介绍，仅仅介绍IDE的环境变量配置。

Android studio提供了IDE全局的环境变量的配置模式，就在 Appearance & Behavior > System Settings > HTTP Proxy 中，由于这个配置是全局的，因此开发中并不是很方便，主要表现在：

• 不同的项目可能不一定需要配置代理，或者需要的代理并不一致
• 如果项目有多个开发者，每个开发者都需要配置一次

因此个人更多的都是直接修改项目相关的配置文件来设置项目相关的代理。具体的就是在项目的根目录的gradle.properties中添加如下的配置：

systemProp.http.proxyHost='proxy.com'
systemProp.http.proxyPort='8080'
# 过滤不使用代理的域名
systemProp.http.nonProxyHosts=*.bihe0832.com
systemProp.https.proxyHost='proxy.com'
systemProp.https.proxyPort='8080'
# 过滤不使用代理的域名
systemProp.https.nonProxyHosts=*.bihe0832.com

这里需要注意的是，很多android的maven依赖都是使用https的，因此不要仅仅配置http相关的代理，需要同时配置https的

pip 代理设置

正如前面提到的，在某些情况下会出现shell配置了代理，但是并没有生效的情况。例如pip，这里介绍一下pip设置代理的方法，比如我们安装Appium-Python-Client。

代理设置

如果在安装时需要代理，只需要在命令参数中加上--proxy参数，例如：

➜  temp  pip3.7 install Appium-Python-Client --proxy http://127.0.0.1:8080

如果在安装时不需要代理，只需要在命令参数中去除--proxy参数，例如：

➜  temp  pip3.7 install Appium-Python-Client

修改pip的镜像源

由于国外官方pypi经常被墙，所以我们最好是将自己使用的pip源更换一下。iMac下，修改 ~/.pip/pip.conf (没有就创建一个)内容如下:

 [global]
 index-url = https://pypi.tuna.tsinghua.edu.cn/simple

gem 代理设置

正如前面提到的，在某些情况下会出现shell配置了代理，但是并没有生效的情况。例如gem，这里介绍一下gem设置代理的方法，比如我们安装github-pages。

代理设置

如果在安装时需要代理，只需要在命令参数中加上--http-proxy参数，例如：

➜  temp  gem install --http-proxy http://proxy.com:8080 github-pages

如果在安装时不需要代理，只需要在命令参数中去除--http-proxy参数，例如：

➜  temp  gem install github-pages

修改镜像

除了通过配置代理来访问资源外，我们还可以通过直接修改gem的镜像源地址。这样即使不用代理也可访问。gem源的修改方法如下：

➜  temp  gem source --add   --remove  

具体示例如下：

➜  temp  gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
➜  temp  gem sources -l
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/universal-darwin17/rbconfig.rb:214: warning: Insecure world writable dir /Users/hardyshi/lib/android-sdk in PATH, mode 040777
*** CURRENT SOURCES ***

https://gems.ruby-china.org

如果修改镜像，建议只保留一个即可，其余的都删除，然后根据剩余的镜像确定是否使用代理，这样会大大提升效率。你也可以直接修改~/.gemrc，添加镜像源。示例如下：

➜  ~  cat ~/.gemrc
---
:backtrace: false
:bulk_threshold: 1000
:sources:
- https://gems.ruby-china.com/
:update_sources: true
:verbose: true

本地安装

当然，gem除了设置代理或者直接修改镜像以外, 还可以直接本地安装，比如我们要安装 github-pages, 先到 https://gems.ruby-china.org 或者其余镜像源把  github-pages 下载到本地, 然后在本地安装:

➜  temp  gem install --local ~/temp/github-pages-localname.gem

npm 代理设置

npm和gem一样，也有两种方法，切换镜像或者设置代理，这里逐个介绍一下：

代理设置

如果在安装时需要代理，只需安装前配置中设置代理，安装后再删除即可。例如：

➜  temp  npm config set proxy=http://proxy.com:8080
➜  temp  npm install --global vue-cli

如果在安装后如果不需要代理，只需要配置中删除代理即可：

➜  temp  npm config delete proxy

修改镜像

• 修改指定路径

  除了通过配置代理来访问资源外，npm也可以修改镜像源地址。修改方法如下：

    ➜  temp  npm config set registry < new registry url >

  具体示例如下：

    ➜  temp  npm config set registry https://registry.npm.taobao.org

• 择优修改路径

  当然你也可以选择官方提供的工具来选择最优路径：首先安装npm registry的管理工具nrm：

    ➜  temp  npm install -g nrm
    npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
    /usr/local/bin/nrm -> /usr/local/lib/node_modules/nrm/cli.js
    /usr/local/lib
    └── nrm@1.0.2

  只有就可以使用nrm来查看有哪些镜像：

    ➜  temp  nrm ls
  
    * npm ---- https://registry.npmjs.org/
      cnpm --- http://r.cnpmjs.org/
      taobao - https://registry.npm.taobao.org/
      nj ----- https://registry.nodejitsu.com/
      rednpm - http://registry.mirror.cqupt.edu.cn/
      npmMirror  https://skimdb.npmjs.com/registry/
      edunpm - http://registry.enpmjs.org/

  然后使用nrm和镜像的别名就可以切换镜像的地址：

    ➜  temp  nrm use taobao
  
    Registry has been set to: https://registry.npm.taobao.org/

  其实nrm还给我们提供了测速工具来测试当前网络到所有镜像地址的访问耗时，我们可以结合测速结果选择更优的镜像地址：

    ➜  temp  nrm test
  
      npm ---- 403ms
      cnpm --- 219ms
    * taobao - 350ms
      nj ----- Fetch Error
      rednpm - 115ms
      npmMirror  1169ms
      edunpm - 220ms

账号内容均来自个人博客，想了解更多资料或跳转到文中链接，可以点击