vue项目使用域名部署（一个域名多个项目）

采用宝塔部署

1.服务器部署多个项目（使用前需要开启二级域名/三级域名等，添加主机记录即可）

部署了两个项目，使用的是一个一级域名和二级域名，nginx监听统一端口80，当通过域名访问 www.xxx.com时访问的是项目1，当通过域名访问 www.m.xxx.com时访问的是项目2。

为什么能这样访问呢？
当客户端发送请求时，请求头中通过host属性，记录当前访问的域名，同样是访问的80端口，nginx解析请求头，发现域名不一样，通过server模块中的server_name进行匹配，交给匹配的server块处理

进入nginx的config

#项目1 注意看域名
server{
listen 80;
server_name: www.xxx.com #域名为：www.xxx.com
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://tomcats; //负载均衡
}
access_log /www/wwwlogs/access.log;
}

#项目2(vue项目) 注意当前域名
server {
listen 80; 
server_name www.m.xxx.com; #域名为：www.m.xxx.com
location / {
root /usr/local;
index index.html index.htm;
try_files $uri $uri/ /xi-music;
}

}

更简便的方法：

• 直接在宝塔面板添加新站点，设置为www.m.xxx.com，
• 在宝塔面板左栏文件处直接将打包好的vue项目拉进/www/wwwroot/www.m.xxx.com便可

后台接口的部署

在宝塔新建数据库，并将下载的的db.sql文件导入数据库

放行端口：8889和3306，在华为云和宝塔面板上都要放行

在www.root文件目录下上传并解压后端文件

更改default.json中的baseurl和host

{
"config_name" : "develop",
"jwt_config" : {
"secretKey":"itcast",
"expiresIn":86400
},
"upload_config":{
"baseURL":"https://pl.nuhchun.cn:2020",
"upload_ueditor":"uploads/ueditor",
"simple_upload_redirect":"https://pl.nuhchun.cn/reload"
},
"db_config" : {
"protocol" : "mysql",
"host" : "175.178.236.192",
"database" : "mydb",
"user" : "mydb",
"password" : "mydb",
"port" : 3306
}
}

把app.js的监听也改成2020

 

 

踩坑问题集合（搞半天）：

1.admin用户不存在。因为你只是上传了sql数据库，并没有导入，重新导入就可以了。
2.用pm2启动时显示pm2:command not found。新版的pm2默认的node版本是4.x，而pm2需要node@10以上的版本，到pm2面板中修改node版本到14.x以上就行了。
3.访问进不去，或者是网站报错。每个端口都需要开启两次，一个是阿里云上面的安全策略，一个是宝塔上面的安全策略。
4.vue配置history模式需要修改nginx的配置，增加一个 try_files $uri $uri/ /index.html =404; 网上的教程很详细了，这里就不细说了。重启nginx，别配置完了问为什么没有效果。