基于若依(RuoYi)脚手架的前端项目部署(vue)
当项目开发完毕,只需要运行一行命令就可以打包你的前端应用。
# 打包正式环境
npm run build:prod
成功提示:
构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件。
通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。
# Tomcat
修改server.xml,Host节点下添加
<Context docBase="" path="/" reloadable="true" source=""/>
dist目录的文件夹下新建WEB-INF文件夹,并在里面添加web.xml文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <display-name>Router for Tomcat</display-name> <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> </web-app>
# Nginx(推荐)
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/{
proxy_set_header Host $http_host;
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;
proxy_pass http://localhost:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
修改好配置后,将上面生成的dist文件夹放到Nginx目录下:
在Nginx目录下执行命令:start nginx
# 常见问题
Nginx使用命令关闭可能无法成功,但是后台不会报错,此时需要到任务管理器中手动关闭Nginx进程:
如果使用Mac 需要修改application.yml文件路径profile
如果使用Linux 提示表不存在,设置大小写敏感配置在/etc/my.cnf 添加lower_case_table_names=1,重启MYSQL服务
如果提示当前权限不足,无法写入文件请检查profile是否可读可写,或者无法访问此目录