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配置的端口