Vue3項(xiàng)目

1.先在vite.config.js中添加 base: './'

export default defineConfig({
  base: './',
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在vite官網(wǎng)中是這樣說的：

簡(jiǎn)單來說就是：使用相對(duì)路徑，可以讓項(xiàng)目能在任意路徑下部署，無需提前固定公共基礎(chǔ)路徑，解決了部署環(huán)境不確定的問題。

具體可以通過Vite官網(wǎng)來查看：構(gòu)建生產(chǎn)版本 | Vite 官方中文文檔

2.如果設(shè)置了用同一接口前綴用來修改請(qǐng)求路徑的端口號(hào)的話，要進(jìn)行刪除或注釋

const baseUrl='/api';
const instance = axios.create({baseURL:baseUrl});
//這里我設(shè)置了統(tǒng)一接口前綴/api，可以直接注釋了

server: {
    proxy: {
      '/api': {//處理以api為前綴的請(qǐng)求    
        target: 'http://localhost:8081',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

這是因?yàn)樵赩ite的官網(wǎng)上說了，這么一句話，Configure custom proxy rules for the dev server，他翻譯過來就是：為開發(fā)服務(wù)器配置自定義代理規(guī)則。

即server.proxy 屬于 開發(fā)服務(wù)器（dev server） 的配置項(xiàng)，用于 “在開發(fā)環(huán)境下配置代理規(guī)則，以解決跨域請(qǐng)求問題”。所以當(dāng)不刪除的話，修改端口不起作用，但是api卻加再了請(qǐng)求路徑上，導(dǎo)致，訪問不到，而報(bào)404.

具體可看Vite官網(wǎng)的這個(gè)位置：https://vite.dev/config/server-options.html#server-proxy

3.配置路由模式

import { createRouter, createWebHashHistory } from 'vue-router'

這建議使用Hash模式，因?yàn)椋核恍枰俜?wù)器層面上進(jìn)行任何特殊處理。

雖然hash模式訪問請(qǐng)求，輸入U(xiǎn)RL會(huì)在URL中加入#，但是

• 訪問 /sign 時(shí)，實(shí)際 URL 是 http://xxx.com/#/sign
• 訪問 /addUser 時(shí)，實(shí)際 URL 是 http://xxx.com/#/addUser

這里的關(guān)鍵是：# 及其后面的內(nèi)容（如 #/sign）不會(huì)被發(fā)送到服務(wù)器。服務(wù)器收到的請(qǐng)求始終是根路徑 /，因此就能返回 index.html，使用了history模式的路由需要再SpringBoot上對(duì)每個(gè)頁面的路徑進(jìn)行對(duì)應(yīng)的配置，但是使用hash模式，在SpringBoot中只用配置/根路徑

hash模式官網(wǎng)：https://router.vuejs.org/zh/guide/essentials/history-mode.html#Hash-%E6%A8%A1%E5%BC%8F

HTML5模式官網(wǎng)：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#HTML5-%E6%A8%A1%E5%BC%8F

4.將vue打包

npm run build

打包完成后會(huì)生成dist文件夾

SpringBoot3項(xiàng)目

1.在pom.xml文件中添加依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.將vue打包的vite文件里面的文件整合到SpringBoot中

將ideax.html放到resources的templates下

其他的文件都放到static下

3.檢查index.html

index.html的作用：index.html 是前端應(yīng)用的唯一入口文件，所有頁面的渲染、資源加載和路由跳轉(zhuǎn)都依賴它來啟動(dòng)，是連接靜態(tài)資源與瀏覽器運(yùn)行環(huán)境的核心橋梁。

<script type="module" crossorigin src="./assets/index-6G-g-WH_.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BgquJFG5.css" rel="external nofollow" >

在index.html中檢查，訪問js和css的文件路徑是否正確，如果不正確，訪問不到css或js，就會(huì)報(bào)出404錯(cuò)誤

4.編寫跳轉(zhuǎn)控制器

作用：接受/根路徑并跳轉(zhuǎn)到index.html

@Controller
public class BasicController {
    @GetMapping("/")
    public String Index() {
        return "index";
    }
}

結(jié)合上述路由中hash模式的特點(diǎn)，# 及其后面的內(nèi)容（如 #/sign）不會(huì)被發(fā)送到服務(wù)器，讓前端的請(qǐng)求路徑全都可以到index.html

5.401報(bào)錯(cuò)

如果出現(xiàn)401報(bào)錯(cuò)，就請(qǐng)仔細(xì)查看是否是自己的攔截器是否攔截了

"static/**",        //靜態(tài)資源的路徑
"/"，        //訪問index.html的根路徑

"/index.html",     

或則也有可能是其他的路徑被攔截，導(dǎo)致無法正常訪問，而報(bào)出401

訪問

因?yàn)槲疫@里用的是hash模式的路由，所以訪問時(shí)要在端口或域名后面加/#

http:localhost:端口號(hào)/#/path

我的這篇文章只能用作參考，具體問題，還要看具體情況

總結(jié)

到此這篇關(guān)于Vue3打包部署到SpringBoot3的文章就介紹到這了,更多相關(guān)Vue3打包部署SpringBoot3內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論