下面的操作以下面的项目为例https://github.com/itguide/vnshop##启动节点服务克隆项目后记得安装依赖包npmiusenode启动节点服务cd/home/wwwroot/vnshop/servernpmrunstart使用pm2启动节点服务npmipm2-gcd/home/wwwroot/vnshop/serverpm2start./bin/wwwtesthttp://vx.itnote.cn:3000/goods/list?sort=1&priceLevel=all&page=1&pageSize=8如果返回数据,说明节点启动正常。如果单纯访问3000端口,会请求api数据,但是如果在vue项目中请求,会生成跨域本地开发,解决跨域问题。后台节点服务启动后为3000端口。在前端vue项目中访问会产生跨域。在本地开发中,我们可以通过配置代理来解决下面详细的解决方法https://segmentfault.com/a/11...vue线上生产环境前后分离如何解决项目中的跨域问题我们在src/config/api.config.jsapi.config配置中配置生产环境和开发环境的访问api地址//判断是开发模式还是本地模式,其实不需要这么麻烦直接constisPro=Object.is(process.env.NODE_ENV,'production')module.exports={baseUrl:isPro?'http://vx.itnote.cn/api/':'api/'}注意:http://vx.itnote.cn/api/这个地址是你自己的服务。每次修改这个配置,都需要编译npmrunbuild。如果是线上环境,将访问http://vx.itnote.cn/api/修改并添加到Nginx配置中。vue项目每次请求以/api/开头的路由,都会自动转为3000端口的服务nginx配置修改vimvim/usr/local/nginx/conf/vhost/vx.itnote.cn.conflo阳离子/api/{proxy_passhttp://127.0.0.1:3000/;#访问v1时,默认转发到3000端口}整体nginx配置server{listen80;#listen[::]:80;server_namevx.itnote.cn;indexindex.htmlindex.htmindex.phpdefault.htmldefault.htmdefault.php;root/home/wwwroot/vnshop/client/dist/;包括none.conf;#error_page404/404.html;#拒绝访问特定目录中的PHP文件#location~/(wp-content|uploads|wp-includes|images)/.*\.php${denyall;}包含enable-php.conf;位置~.*\.(gif|jpg|jpeg|png|bmp|swf)${过期30天;}location/api/{proxy_passhttp://127.0.0.1:3000/;#访问api时默认转发到3000端口}location~.*\.(js|css)?${expires12h;}location~/.well-known{允许所有;}位置~/\.{全部拒绝;}access_log/home/wwwlogs/vx.itnote.cn.log;}
