架构师

您现在的位置是:首页 > 技术博客 > 爱运维

爱运维

基于若依(RuoYi)脚手架的前端项目部署(vue)

架构师小跟班 2020-06-13 爱运维
当项目开发完毕,只需要运行一行命令就可以打包你的前端应用。# 打包正式环境npm run build:prod成功提示:构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文

当项目开发完毕,只需要运行一行命令就可以打包你的前端应用。

# 打包正式环境

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是否可读可写,或者无法访问此目录

文章评论