Vue項(xiàng)目如何部署到SpringBoot工程下
首先, 從前后端分離的角度來(lái)說(shuō), 不建議將編譯后的vue工程放到SpringBoot工程目錄下從而部署在Tomcat下, 因?yàn)檫@有點(diǎn)違背前后端分離的設(shè)計(jì).
建議將前端項(xiàng)目部署到專用的服務(wù)器（如Nginx）下，即分開部署后端代碼與前端代碼。本文僅作為技術(shù)性的探索。
1. 修改前端編譯配置
找到vue工程的 config/prod.env.js 文件(如果沒(méi)有該文件可不處理)
修改 BASE_API 為正式環(huán)境后端服務(wù)API根地址：
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://localhost:8000"'
}
找到 config/index.js 文件, 修改 module.exports 下的build中的 assetsPublicPath 為 ‘/’:
/**
* You can set by youself according to actual condition
* You will need to set this if you plan to deploy your site under a sub path,
* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then assetsPublicPath should be set to "/bar/".
* In most cases please use '/' !!!
*/
assetsPublicPath: '/',
意即, 你設(shè)置為 ‘/’ , 表示編譯后的靜態(tài)文件要被部署到服務(wù)根路徑下.
例如：
1.如果部署到Nginx，映射到你Nginx的域名為 example.com 并且Nginx訪問(wèn)的根目錄為文件夾A的話，編譯后的文件將會(huì)被部署到文件夾A路徑下;
2.如果采用SpringBoot的話，默認(rèn)靜態(tài)文件根路徑為src/main/resource/static，那么就需要將編譯后的文件放在static下.
2. 編譯前端工程
切換到Vue工程根目錄, 例如：
cd eladmin-qd
執(zhí)行npm編譯
npm run build
這樣之后就會(huì)在工程根目錄生成一個(gè)dist文件夾，編譯好的靜態(tài)文件就在這里面：
3. 部署前端工程到boot服務(wù)
將這個(gè)三個(gè)文件拷貝到SpringBoot工程的static文件夾下：
這樣子之后打包的工程運(yùn)行后可通過(guò) 域名或ip 訪問(wèn)：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的方法
下面小編就為大家分享一篇webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家介紹了vue中v-if和v-show使用區(qū)別源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue組件之間的數(shù)據(jù)傳遞方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)
這篇文章主要介紹了關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue指令?v-bind的使用和注意需要注意的點(diǎn)
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞?v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下，希望對(duì)大家有所幫助2021-11-11
vue3中使用keepAlive緩存路由組件不生效的問(wèn)題解決
這篇文章主要介紹了vue3中使用keepAlive緩存路由組件不生效的問(wèn)題解決,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-06-06
vue-resource調(diào)用promise取數(shù)據(jù)方式詳解
這篇文章主要介紹了vue-resource調(diào)用promise取數(shù)據(jù)方式詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
el-select 點(diǎn)擊按鈕滾動(dòng)到選擇框頂部的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家分享el-select 點(diǎn)擊按鈕滾動(dòng)到選擇框頂部效果,主要代碼是在visibleChange在這個(gè)popper里面找到.el-select-dropdown__list,感興趣的朋友跟隨小編一起看看吧2024-05-05
element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
這篇文章主要介紹了element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07