VUE本地开发第三弹:vue-cli+nginx实现本地开发
来源:互联网 发布:国外的即时通讯软件 编辑:程序博客网 时间:2024/04/26 21:49
之前写过两篇博客,都是关于如何使用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 nginxnpm run dev
到这步为止,项目即可正确运行,开始本地开发。
注意:按照此种方法配置的童鞋,在每次重启电脑运行本地vue-cli项目之前,需要关闭所有对80端口占用的服务,否则nginx无法启动!
- VUE本地开发第三弹:vue-cli+nginx实现本地开发
- vue实现app问题总结(一)vue-cli本地开发数据Mock
- vue开发 vue-tutorial本地记事本
- vue-cli项目本地代理实现跨域请求
- vue开发:vue-cli引入swiper
- vue-cli学习开发总结
- vue-cli创建开发环境
- vue-cli开发环境实现跨域请求
- vue-cli开发vue项目1组件化开发
- 基于vue+vuex+localStorage开发的本地记事本
- html5 localstorage结合vue开发本地记事本项目源码
- vue开发请求本地模拟数据的配置方法
- Vue--本地开发环境下的跨域
- Vue-cli 使用json server在本地模拟请求数据
- Vue-cli项目获取本地json文件数据
- vue.js开发环境搭建(vue-cli脚手架)
- Vue.js开发环境搭建-工具安装(vue-cli)
- vue开发:vue-cli+axios解决跨域问题
- p分位函数(四分位数)概念与pandas中的quantile函数
- windows API入门使用 vs2013
- CodeForces
- CF
- MySQL的常用操作命令详解
- VUE本地开发第三弹:vue-cli+nginx实现本地开发
- K-diff Pairs in an Array问题及解法
- centos搭建gitlab服务器
- 关于上架App Store 的问题汇总
- 湖南房卡跑胡子棋牌源码,娄底跑胡子\衡阳跑胡子\怀化跑胡子\湘乡跑胡子
- HDU-1242 Rescue
- LD_LIBRARY_PATH .
- 数据库——由ER图转换为关系映射的方法
- ftp服务器搭建