ruoyi框架前端vue部署生产环境教程

renkai721

已于 2023-10-31 16:17:09 修改

阅读量1.7k

点赞数 2

分类专栏：前端文章标签：若依前端部署 vue部署 vue打包生产 ruoyi打包生产环境 ruoyi部署生产 nginx部署子目录

于 2023-10-31 15:08:59 首次发布

本文链接：https://blog.csdn.net/renkai721/article/details/134139405

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

前端有子目录，后端有项目名称，请看第3种

第1种

前端nginx没有子目录，后端也没有访问的项目名。这种是最简单的。

vue.config.js

只需要修改target中的IP和端口，就是后端访问的IP和端口

# vue.config.js
devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // 开发环境
        // target: `http://192.168.1.120:8080`,
        // 生产环境--------修改自己的IP和端口
        target: `http://192.168.100.110:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

.env.production

# .env.production
# 删除里面的/prod-api
VUE_APP_BASE_API = ''

操作

修改了上面的配置后，直接输入npm run build:prod，等待编译完成。然后把dist文件中的所有文件复制上传到nginx/html文件夹下面，然后启动nginx即可。

结束

---------------------------------

第2种

前端nginx没有子目录，后端有自定义访问的项目名，也就是项目访问的前缀。

vue.config.js

只需要修改target中的IP和端口，追加了后端访问的项目名。下面的demo中的工程名称叫做usersystem

# vue.config.js
devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // 开发环境
        // target: `http://192.168.1.120:8080/usersystem`,
        // 生产环境--------修改自己的IP和端口，项目名称
        target: `http://192.168.100.110:8080/usersystem`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

.env.production

# .env.production

VUE_APP_BASE_API = '/usersystem'

nginx.conf

 
 
#user  nobody;
worker_processes  1;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    # 文件大小限制，默认1m
    client_max_body_size     50m;
    client_header_timeout    1m;
    client_body_timeout      1m;
    proxy_connect_timeout    60s;
    proxy_read_timeout      1m;
    proxy_send_timeout      1m;
    # websocket需要增加该配置
    map $http_upgrade $connection_upgrade {
      default keep-alive;
      'websocket' upgrade;
  }
 
    #gzip  on;
 
    upstream user_server_name{
        server 192.168.1.110:8080;
    }
    
    server {
        listen 80;
        server_name user.test.com;
        
        location / {
            index index.html index.htm;
            root /usr/nginx/html;
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        error_page 404 /index.html;
        location = /index.html {
        	root /usr/nginx/html;
        }
        # 后台访问地址
        location /usersystem/ {
            # enterprise wechat test
            add_header X-Content-Type-Options nosniff;
            proxy_set_header X-scheme $scheme;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # 注意必须设置 Host，否则使用 Java Client 无法正常访问 MinIO
            proxy_set_header Host $http_host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_hide_header X-Powered-By;
            proxy_hide_header Vary;
            client_max_body_size 2048m; 
            proxy_pass http://user_server_name;
            # 重复提交情况
            proxy_next_upstream off;
            proxy_read_timeout 600;
			proxy_send_timeout 600;
            proxy_connect_timeout 600;
        }
 
   
    }
 
    server {
        listen       80;
        # 自己需要监听的域名
        server_name user.test.com;
        #将请求转成https
        rewrite ^(.*)$ https://$host$1 permanent;
        
    }
 
 
}

操作

修改了上面的配置后，直接输入npm run build:prod，等待编译完成。然后把dist文件中的所有文件复制上传到nginx/html文件夹下面，然后启动nginx即可。

结束

---------------------------------

第3种

前端需要部署在nginx的子目录中，后端有访问的项目名。

vue.config.js

只需要修改target中的IP和端口，就是后端访问的IP和端口

// vue.config.js

  

// 前端部署在nginx/html/usersystemWeb文件夹里面，也就是前端子目录名称
publicPath: process.env.NODE_ENV === "production" ? "/usersystemWeb/" : "/",

// 默认dist
outputDir: 'usersystemWeb',

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // 开发环境
        // target: `http://192.168.1.120:8080/usersystem`,
        // 生产环境--------修改自己的IP和端口，项目名称
        target: `http://192.168.100.110:8080/usersystem`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

.env.production

# .env.production

VUE_APP_BASE_API = '/usersystem'

router/index.js

// router/index.js

export default new Router({
// 在这里增加前端子目录的名称
  base:'/usersystemWeb/',
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 在这里增加自己的子目录名称 -->
    <meta base="/aiot/">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>logo.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	  <style>
   
  </style>
  </head>
  <body>
    <div id="app">
	    <div id="loader-wrapper">
		    <div id="loader"></div>
		    <div class="loader-section section-left"></div>
		    <div class="loader-section section-right"></div>
		    <!-- <div class="load_title">正在加载系统资源，请耐心等待</div> -->
        </div>
	</div>
 
  </body>
</html>

nginx.conf

 
 
#user  nobody;
worker_processes  1;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    # 文件大小限制，默认1m
    client_max_body_size     50m;
    client_header_timeout    1m;
    client_body_timeout      1m;
    proxy_connect_timeout    60s;
    proxy_read_timeout      1m;
    proxy_send_timeout      1m;
    # websocket需要增加该配置
    map $http_upgrade $connection_upgrade {
      default keep-alive;
      'websocket' upgrade;
  }
 
    #gzip  on;
 
 
    upstream websocket_name{
        server 192.168.1.15:11108;
    }
    upstream user_server_name{
        server 192.168.1.110:8080;
    }
    
    server {
        listen 80;
        server_name user.test.com;
        
        location ^~/usersystemWeb {
            # 前端子目录文件夹名称
            alias /usr/local/nginx/html/usersystemWeb;
            try_files $uri $uri/ /index.html;
            index index.html;
        }
        location / {
            index index.html index.htm;
            root /usr/local/nginx/html/usersystemWeb;
            # 下面这句话可以解决vue打包部署后，页面刷新报404的问题
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        error_page 404 /index.html;
        location = /index.html {
        	root /usr/local/nginx/html/usersystemWeb;
        }
        # 后台访问地址
        location /usersystem/ {
            # enterprise wechat test
            add_header X-Content-Type-Options nosniff;
            proxy_set_header X-scheme $scheme;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # 注意必须设置 Host，否则使用 Java Client 无法正常访问 MinIO
            proxy_set_header Host $http_host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_hide_header X-Powered-By;
            proxy_hide_header Vary;
            client_max_body_size 2048m; 
            proxy_pass http://user_server_name;
            # 重复提交情况
            proxy_next_upstream off;
            proxy_read_timeout 600;
			proxy_send_timeout 600;
            proxy_connect_timeout 600;
        }
 
  
 
        # 重点在这里，websocket后面没有斜杠，和其它项目的区别
        location /websocket {
            proxy_pass http://websocket_name;
            proxy_read_timeout 300s;
            proxy_send_timeout 300s;
            proxy_redirect off;
            proxy_set_header Host $host:5052;
            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;
            #升级http1.1到 websocket协议
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection  $connection_upgrade;
        }
   
    }
 
    server {
        listen       80;
        # 自己需要监听的域名
        server_name user.test.com;
        #将请求转成https
        rewrite ^(.*)$ https://$host$1 permanent;
        
    }
 
 
}

操作

修改了上面的配置后，直接输入npm run build:prod，等待编译完成。然后把usersystemWeb文件中的所有文件复制上传到nginx/html/usersystemWeb文件夹下面，然后启动nginx即可。

nginx安装教程

# 安装nginx的依赖包
yum -y install gcc gcc- c++ pcre-devel openssl-devel wget

# 自己创建文件夹
cd /opt/myNginx

# 下载nginx安装
wget http://nginx.org/download/nginx-1.12.2.tar.gz 

# 解压nginx-1.12.2的压缩包
tar xf nginx-1.12.2.tar.gz

# 进入nginx-1.12.2 文件目录
cd nginx-1.12.2 

# 配置检测环境、文件目录在/usr/local/nginx这是需要SSL的命令
# 如果不需要就执行./configure --prefix=/usr/local/nginx命令
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

# 编译
make && make install

# 制作软连接
ln -sv /usr/local/nginx/sbin/nginx /usr/bin/nginx

# 修改环境变量
vim /etc/profile

# 按下i键，在profile文件末尾，加上下面的代码
PATH=$PATH:/usr/local/nginx/sbin

# 按下esc键，然后输入:wq来退出
# 刷新配置文件
source /etc/profile

nginx启动停止命令

# nginx-cmd.sh

# 每次修改配置文件需要重新启动，第一次启动必须使用start命令，不能使用restart命令
# 启动
# sh /usr/local/nginx/nginx-cmd.sh start
# 停止
# sh /usr/local/nginx/nginx-cmd.sh stop
# 重启
# sh /usr/local/nginx/nginx-cmd.sh restart

#!/bin/bash
# Nginx可执行文件路径 别忘了换成你自己安装的路径
NGINX_PATH="/usr/local/nginx/sbin/nginx"

start() {
    echo "Starting Nginx..."
    $NGINX_PATH
}

stop() {
    echo "Stopping Nginx..."
    $NGINX_PATH -s stop
}

restart() {
    echo "Restarting Nginx..."
    $NGINX_PATH -s reload
}

case "$1" in
    start)
        start
        ;;
    stop)
        stop
        ;;
    restart)
        restart
        ;;
    *)
        echo "Usage: $0 {start|stop|restart}"
        exit 1
        ;;
esac

exit 0