Vue項(xiàng)目如何部署到SpringBoot工程下
首先, 從前后端分離的角度來(lái)說(shuō), 不建議將編譯后的vue工程放到SpringBoot工程目錄下從而部署在Tomcat下, 因?yàn)檫@有點(diǎn)違背前后端分離的設(shè)計(jì).
建議將前端項(xiàng)目部署到專用的服務(wù)器（如Nginx）下，即分開(kāi)部署后端代碼與前端代碼。本文僅作為技術(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)文章
vite build vue3項(xiàng)目配置開(kāi)啟sourcemap方式
這篇文章主要介紹了vite build vue3項(xiàng)目配置開(kāi)啟sourcemap方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue3.0中sass全局的使用過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中組件的傳值方式詳解,Vue中最常見(jiàn)的組件之間的通信方式有12種，今天我們會(huì)詳細(xì)講解父?jìng)髯觩rops方式和子傳父emit以及非父子組件傳值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了解讀vue項(xiàng)目防范XSS攻擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3組件通信方式,面試題經(jīng)常會(huì)問(wèn)到vue3組件間的通信方式，今天就通過(guò)實(shí)例代碼給大家詳細(xì)介紹下，對(duì)vue3組件通信相關(guān)知識(shí)感興趣的朋友一起看看吧2022-08-08
vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問(wèn)題
這篇文章主要介紹了vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
element表格數(shù)據(jù)部分模糊的實(shí)現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實(shí)現(xiàn)代碼,文中有詳細(xì)的效果展示和實(shí)現(xiàn)代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
項(xiàng)目創(chuàng)建Vite是一個(gè)web開(kāi)發(fā)構(gòu)建工具,由于其原生ES模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于Vite打包分割代碼的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
vue通過(guò)ollama接口調(diào)用開(kāi)源模型實(shí)現(xiàn)人機(jī)對(duì)話功能
文章介紹了如何在本地安裝ollama并配置開(kāi)源大模型,以及如何通過(guò)JavaScript和Vue.js實(shí)現(xiàn)人機(jī)對(duì)話功能,感興趣的朋友一起看看吧2024-11-11