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