【前端部署】多个vue项目部署到Linux服务器
前言
利用nginx将两个vue项目打包部署到服务器上，之前已在服务器上部署过单个项目， 此次在单个项目部署的基础上进行修改，并将两个项目布置在同一端口下。若有需要单个vue项目部署的，可查看下述链接：
【前端部署】vue项目打包并部署到Linux服务器
一、修改vue项目中配置
1.修改vue.config.js
打开vs code，打开第二个vue项目文件夹，打开文件夹下的vue.config.js文件，更改文件中的publicPath，将路径名字更改为自己想要的名字，我这里改为/test/，具体代码如下：
module.exports = {
publicPath: "/test/",
devServer:{
host:"localhost",
port:'8080',
https:false,
hotOnly:false,
proxy:{
"server":{
target:"http://localhost:8080",
ws:true,
changeOrigin:true,
pathRewrite:{
'^/server':''
}
}
}
}
}
2.修改router文件下的index.js
在vue项目文件夹中找到router文件夹，打开文件夹中的index.js文件，修改文件中的base，具体代码如下：
export default new VueRouter({
mode: 'history',//打包会出现问题
base: '/test/', //这里也可以改为 base: process.env.BASE_URL,
routes: [
]
})
3.打包项目
在vs code终端中输入npm run build打包项目，将打包好的文件夹dist通过wincsp放入服务器中，具体步骤可查看文章【前端部署】vue项目打包并部署到Linux服务器
这里需要注意的是，若你将两个项目的dist文件夹都放在同一文件路径下，可以将文件夹名字改为自己想要的名字，这里我把第二个项目的dist文件夹名字改为test。
二、修改nginx配置
打开服务器，找到nginx.conf文件并打开，我这里的文件路径是/usr/local/nginx/conf/nginx.conf。
在原有基础上，添加第二个项目的location配置，注意添加location /test路径，具体代码如下：
#第二个项目
location /test {
alias /home/vue/test;
index index.html index.htm;
try_files $uri $uri/ @router;
}
/home/vue/dist和/home/vue/test是两个vue项目的文件夹路径，nginx.conf的全部代码如下：
user root;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost;
access_log logs/host.access.log;
error_log logs/error_log;
#第一个项目
location / {
root /home/vue/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
}
#第二个项目
location /test {
alias /home/vue/test;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
三、重启nginx
打开终端，进入nginx的安装目录，我这里是/usr/local/nginx/sbin
cd /usr/local/nginx/sbin
先停止nginx服务
./nginx -s stop
检查nginx配置是否正确
./nginx -t
启动nginx服务
./nginx
或者重启nginx服务
./nginx -s reload
查看nginx状态
ps aux | grep nginx
nginx正常启动后，在服务器上的浏览器打开http://localhost:8080/test就可以进入第二个vue项目的界面，或者在其他电脑打开http://你的服务器ip:8080/test也可以进入界面。
总结
本文主要是同一端口下部署多个vue项目，多个vue项目也可以在不同端口下进行部署。欢迎指出错误～
