Vue?項目的成功發(fā)布和部署的實現(xiàn)
最近一直在嘗試對 Vue 項目進行打包和發(fā)布，發(fā)現(xiàn)通過 npm run build 打包生成的 dist 文件不能直接放到服務器下面進行部署，否則會出現(xiàn)以下問題：
究其原因是，無法正確找到相關 js 文件的路徑 。網(wǎng)上查找了很多的解決方案，大多建議修改路由模式（mode:' history '）和發(fā)布的文件路徑（publicPath:' ./ '），但由于腳手架版本的原因，一直找不到相應的配置文件，這里使用的是最新版本的 VueCLI 5 創(chuàng)建的項目，官方簡化了許多文件的配置信息（隱藏起來了）。經過多次嘗試，最終實現(xiàn)了 Vue 項目在本地服務器 Tomcat 下的部署！
1、修改配置信息：router/index.js 文件和 vue.config.js 文件
router/index.js
const router = new Router({
mode:'history',//修改路由模式為 history
routes:routes
})vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:'./' //添加配置信息
})打包運行
npm run build
最終生成的文件目錄為：
將整個 dist 文件夾放到 Tomcat 目錄下的 webapps 目錄下
啟動 Tomcat 服務，打開文件目錄或者輸入網(wǎng)址 http://localhost:8080/dist/
運行成功。
到此這篇關于Vue 項目的成功發(fā)布和部署的實現(xiàn)的文章就介紹到這了,更多相關Vue 項目發(fā)布和部署內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了解決Vue前后端跨域問題的多種方式,本文主要介紹借助解決Vue前后端跨域問題的幾種方式，將會使用axios進行請求需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue.use()的用法和install的用法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
下面小編就為大家分享一篇vue結合Echarts實現(xiàn)點擊高亮效果的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章將給大家詳細介紹了vue3如何通過canvas實現(xiàn)圖片圈選功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴快來跟隨小編一起學習一下吧2023-12-12
這篇文章主要為大家詳細介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實例詳解,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
這篇文章主要給大家介紹了關于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿足條件的項,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了解決el-tree節(jié)點過濾不顯示下級的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue中如何判斷對象是否為空，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06