sponsored links

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无法启动!

Tags: