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