如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目
项目：vue+express+mongodb
项目前后分离部署在一台服务器上面
- express端口：3000
- mongodb端口：27017
- vue端口：本地是8080服务端是：80
本地开发配置
本地开发基于vuecli端口是8080如果请求api的时候在前缀加上localhost:3000会提示跨域问题，我们可以使用下面方式来解决这个问题
在vue项目路径找到这个文件/vue-item/config/index.js找到这行代码：
proxyTable:{}
添加如下配置
demo:
proxyTable:{
'/v1/**':{
target:'http://localhost:3000/',
pathRewrite:{
'^/v1':'/'
}
}
}
v1是我给api自动添加的前缀
这个前缀可以使用axios配置添加
在main.js主入口文件添加
如下
importapiConfigfrom'../config/api.config' //importaxios importAxiosfrom'axios' importVueAxiosfrom'vue-axios' Vue.use(VueAxios,Axios) //Axios.defaults.baseURL=apiConfig.baseUrl; Axios.defaults.baseURL='v1/'这样也ok的
api.config
判断是开发模式还是本地模式，其实不需要这么麻烦直接
constisProdMode=Object.is(process.env.NODE_ENV,'production')
module.exports={
baseUrl:isProdMode?'api.shudong.wang/v1/':'v1/'
}
如果把axios配置了自动前缀
每次访问的时候
data(){
return{
articleList:Object
}
},
mounted:function(){
this.getArticleList()
},
methods:{
getArticleList(){
console.log(111111111)
this.$http.get("/article/list")//this.$httpaxios使用的一种方式
.then((response)=>{
console.log(response.data)
letres=response.data;
this.articleList=res.data;
})
.catch((error)=>{
console.log(error)
})
}
},
上面请求的例子中相当于访问：localhost:8080/v1/article/list
这样就可以解决跨域问题
其实最终访问的是localhost:3000/article/listexpress的api
这个v1只是api版本的标识，如果想带着，并且api是可以v1版本方式访问的，把代理的路径重新规则去掉就可以
操作如下：
proxyTable:{
'/v1/**':{
target:'http://localhost:3000/',
//pathRewrite:{//这个规则去掉
//'^/v1':'/'
//}
},
'/goods/*':{
target:'http://localhost:3000'
},
'/users/**':{
target:'http://localhost:3000'
}
}
服务端部署
本地可以使用proxyTable解决跨域问题，那么服务端怎么解决跨域问题呢？
answer：使用nginx反向代理
nginx配置：仔细分析一下看看是否适合自己的业务场景
server
{
listen80;
#listen[::]:80;
server_namezhenfan.shudong.wang;#你的域名不需要加http
indexindex.htmlindex.htmindex.phpdefault.htmldefault.htmdefault.php;
root/home/wwwroot/zhenfan/dist;
includenone.conf;
#error_page404/404.html;
#DenyaccesstoPHPfilesinspecificdirectory
#location~/(wp-content|uploads|wp-includes|images)/.*\.php${denyall;}
includeenable-php.conf;
location/v1{
proxy_passhttp://127.0.0.1:3000/;#当访问v1的时候默认转发到3000端口
}
location~.*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires30d;
}
location~.*\.(js|css)?$
{
expires12h;
}
location~/.well-known{
allowall;
}
location~/\.
{
denyall;
}
access_logoff;
}
关于express链接mongodb可以直接填写端口号，不存在跨域问题，直接127.0.0.1：27017就ok，
怎么在服务器上面搭建可以参考上篇mongodb篇
关于有什么问题，可以在下面留言，希望你是来讨论技术的。
上次写完一篇，一个小朋友，来到这里咬文嚼字，针对部署这个词，说用的不当，还口口声声说是来讨论技术，把注意力放在这个上面上真没意义。
希望本篇文章能帮到你，解决你的问题。也希望大家多多支持毛票票。