VUE本地开发第三弹：vue-cli+nginx实现本地开发

之前写过两篇博客，都是关于如何使用vue-cli进行本地开发的，但仍是覆盖不到所有的场景（至少我目前开发遇到了这样的情况）。后来找到了一套解决方案，如题，即使用nginx转发线上接口，从而配合vue-cli完成本地开发。接下来就这种方法作一个分享。

第一步：安装nginx
nginx的安装很方便，具体安装以及基础配置可参照：http://www.cnblogs.com/cheemon/p/5638394.html
注：在安装完成后，如果遇到无法启动的问题，可能是以下两种情况造成的：
1、MAC自带的Apache的启动占用了80端口，解决办法是关闭Apache服务器：

sudo apachectl stop

2、MAC本身对80端口的占用，具体的解决办法可参照我之前的博客：http://blog.csdn.net/mrblacklu/article/details/70739777

第二步：在nginx.conf中配置nginx进行接口转发
找到文件中的server配置，

server {
 listen       80;
 server_name  loc.test.com;

 location / {
     proxy_pass http://loc.test.com:8080/;
     proxy_redirect off;
     proxy_set_header Host $proxy_host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header Cookie $http_cookie;
 }

location /api {
    proxy_pass http://m.online.com;
    proxy_redirect off;
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Cookie $http_cookie;
    proxy_cookie_path /api /;
}
........
}

其中，listen是nginx监听的端口，server_name是nginx监听的域名。location的配置中，proxy_pass配置的是转发的目的域名，所有对http://loc.test.com的请求会转发至http://loc.test.com:8080。之后的api设置是对线上环境接口的转发，所有对http://loc.test.com/api的请求会转发至线上的接口地址http://m.online.com。

第三步：配置vue-cli中，config下的index.js文件，修改dev设置：

 dev: {
 env: require('./dev.env'),
 port: 8080,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
   '/api': {
     target: 'https://xxxx/api',
     changeOrigin: true,
     pathRewrite: {
       '^/api': ''
     }
   }
 },

端口号改为8080，以便nginx实现转发。proxyTable中配置接口转发，配置解释见：http://blog.csdn.net/mrblacklu/article/details/63888636。

第四步：修改vue-cli本地开发域名设置
打开build下dev-server.js文件，修改uri的地址为loc.test.com，即nginx中所配置的监听的域名。

第五步：修改本地hosts配置
将第四步中设置的域名配置到hosts文件中：

127.0.0.1 loc.test.com

所有步骤完成后，运行

sudo nginx
npm run dev

到这步为止，项目即可正确运行，开始本地开发。

注意：按照此种方法配置的童鞋，在每次重启电脑运行本地vue-cli项目之前，需要关闭所有对80端口占用的服务，否则nginx无法启动！