【前端部署】多个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项目也可以在不同端口下进行部署。欢迎指出错误～