【前端部署】多个vue项目部署到Linux服务器

【前端部署】多个vue项目部署到Linux服务器


文章目录

  • 【前端部署】多个vue项目部署到Linux服务器
  • 前言
  • 一、修改vue项目中配置
    • 1.修改vue.config.js
    • 2.修改router文件下的index.js
    • 3.打包项目
  • 二、修改nginx配置
  • 三、重启nginx
  • 总结


前言

利用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项目也可以在不同端口下进行部署。欢迎指出错误~

你可能感兴趣的:(前端,vue.js,前端,服务器,nginx)