springboot + vue 部署上线的两种方式

springboot 部署一般是采用jar 部署，也有采用war（集成了jsp，不推荐使用）

一、将vue 项目编译后打入jar 包部署方式

1、运行vue打包命令，前提是vue项目正常，无错误！

npm run build

2、运行命令后，在项目根目录会生成一个dist 文件夹，将dist 文件夹的所有文件，拷贝至springboot项目中的static（static默认放行）

访问前缀，如果打包后的文件直接放置于springboot的static文件夹下则不需要加前缀，如果在static下建立了二级目录，则这里需要改成目录名称，例如：static/test1 则这里需要变成/test1 在运行npm run build

无独有偶，如果需要部署多个前端项目，比如PC后台，H5端两个项目，则需要在static 下建二级文件夹。这就是baseUrl 的前缀的作用。当然根据系统架构的不同，因情况定。总之，需要注意系统的访问前缀

module.exports = {
    baseUrl: '/',//这里是访问前缀，如果打包后的文件直接放置于springboot的static文件夹下则不需要加前缀，如果在static下建立了二级目录，则这里需要改成目录名称，例如：static/test1 则这里需要变成/test1 在运行npm run build 
    devServer: {
        port:8080,
        proxy: 'http://47.96.21.80:8999'
    },
    chainWebpack: config => {
        config.merge({
            externals: {
                "CKEDITOR": "window.CKEDITOR"
            }
        });
    },
    pwa: {
        iconPaths: {
            favicon32     : 'favicon.ico',
            favicon16     : 'favicon.ico',
            appleTouchIcon: 'favicon.ico',
            maskIcon      : 'favicon.ico',
            msTileImage   : 'favicon.ico'
        }
    }
}

3、将项目打包成jar，并部署到服务器上，springboot不需要安装tomcat容器，运行jar命令即可

nohup java -jar test-1.0.jar --spring.profiles.active=trial &

--spring.profiles.active=trial 这里可以指定配置文件。博主一般根据多个环境的不同，创建多个环境对应的配置文件，如下：
因此可以采用配置命令方式设定系统应用哪个配置文件。

application-dev.yml

application-server.yml

application-trial.yml

4、访问项目

IP:端口/前缀

优势：

1、部署方便，直接了当。

2、简单明了。

劣势

1、在只修改前端的情况下需要重新打包，比较繁琐。

二、前后端分离部署

1、运行vue打包命令，前提是vue项目正常，无错误！

npm run build

2、安装nginx 并添加如下配置

server {
        listen       9999; # 监听端口
        server_name  localhost; # 域名可以有多个，用空格隔开

        location / {
            root   D:\phpstudy_pro\WWW\energy;     #站点根目录，即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。 
            index  index.html index.htm;    #目录内的默认打开文件,
        }

        #ssl配置省略
         location /前缀{
            rewrite  ^.+前缀/?(.*)$ /$1 break;
            proxy_pass  http://IP:端口;    #即需要代理的IP地址
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }

        #error_page  404              /404.html;    #对错误页面404.html 做了定向配置

        # redirect server error pages to the static page /50x.html
        #将服务器错误页面重定向到静态页面/50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

3、将vue项目中的dist下所有的文件拷贝至nginx中的root 对应的系统目录下。

4、访问项目

IP：nginx配置的端口

springboot + vue 部署上线的两种方式

猜你喜欢