1.打包前的配置

打開vue.config.js配置如圖所示內容

//打包配置文件
module.exports = {assetsDir: 'static',parallel: false,publicPath: './',
};

這段代碼是Vue.js項目的打包配置文件，主要功能包括：
- `assetsDir: 'static'` - 設置靜態資源文件夾名為'static'
- `parallel: false` - 關閉并行編譯處理
- `publicPath: './'` - 設置打包后文件的公共路徑為相對路徑
用于配置項目構建時的資源目錄和路徑引用方式。?

在index.js中配置

const router = new VueRouter({mode: 'hash',base: process.env.BASE_URL,routes
})

這段代碼創建了一個Vue Router實例，用于管理Vue應用的路由。
- `mode: 'hash'`：使用URL hash模式進行路由
- `base: process.env.BASE_URL`：設置應用的基礎路徑
- `routes`：傳入路由配置數組
該路由器將根據URL變化渲染對應的組件。??

上面的process.env.BASE_URL是啥？

這是我們在request.js做中對環境做的一個配置?

?

而?VUE_APP_BASEURL 正是我們在.env.development（開發環境）文件和.env.production（發布環境）文件中配置的ip:port，我自己的項目配置如下：

VUE_APP_BASEURL='http://localhost:9090' // 后端服務地址

2.項目打包

終端運行命令 npm run build
運行成功后會生成dist文件

將dist文件復制存放于resources/static目錄下?

3.后端配置?

這段代碼的功能是配置靜態資源處理器：

addResourceHandler("/**")：匹配所有路徑的靜態資源請求
addResourceLocations("classpath:/static/")：指定靜態資源的查找位置為classpath下的static目錄
這樣配置后，項目可以正確訪問和加載位于static文件夾中的靜態資源文件（如CSS、JS、圖片等）。

添加路徑使其訪問dist下的文件不被jwt攔截。?

4.重定向前端入口頁面?

    @GetMapping("/")public void hello(HttpServletResponse response) throws IOException {// 重定向到前端入口頁面response.sendRedirect("/dist/index.html");}

此時訪問/即可跳轉如圖鏈接

使用Vue打包后本地運行的優勢在于：將代碼提供給他人時，對方只需啟動SpringBoot服務即可實現前后端交互，無需再通過npm run serve命令運行前端服務。

如果我的內容對你有幫助，請辛苦動動您的手指為我點贊，評論，收藏。感謝大家！