ruoyi框架前端vue部署生产环境教程
前端有子目录，后端有项目名称，请看第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
<%= webpackConfig.name %>
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/profilenginx启动停止命令
# 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