Vue?項目的成功發(fā)布和部署的實現(xiàn)
最近一直在嘗試對 Vue 項目進行打包和發(fā)布，發(fā)現(xiàn)通過 npm run build 打包生成的 dist 文件不能直接放到服務(wù)器下面進行部署，否則會出現(xiàn)以下問題：
究其原因是，無法正確找到相關(guān) js 文件的路徑 。網(wǎng)上查找了很多的解決方案，大多建議修改路由模式（mode:' history '）和發(fā)布的文件路徑（publicPath:' ./ '），但由于腳手架版本的原因，一直找不到相應(yīng)的配置文件，這里使用的是最新版本的 VueCLI 5 創(chuàng)建的項目，官方簡化了許多文件的配置信息（隱藏起來了）。經(jīng)過多次嘗試，最終實現(xiàn)了 Vue 項目在本地服務(wù)器 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ù)，打開文件目錄或者輸入網(wǎng)址 http://localhost:8080/dist/
運行成功。
到此這篇關(guān)于Vue 項目的成功發(fā)布和部署的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 項目發(fā)布和部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實例,為undefined
這篇文章主要介紹了淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實例,為undefined，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
Vue.js每天必學之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Vue2中如何使用全局事件總線實現(xiàn)任意組件間通信
全局事件總線就是一種組件間通信的方式,適用于任意組件間通信,下面這篇文章主要給大家介紹了關(guān)于Vue2中如何使用全局事件總線實現(xiàn)任意組件間通信的相關(guān)資料,需要的朋友可以參考下2022-12-12
ref用來輔助我們獲取DOM元素或組件的引用實例對象,每個vue的組件實例上,都包含一個refs對象,里面存儲著對應(yīng)的DOM元素或組件的引用,默認情況下,組件的refs指向一個空對象2023-03-03
這篇文章主要介紹了Antd中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了Vue2 cube-ui時間選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue--Router動態(tài)路由的用法,很多時候，我們需要將給定匹配模式的路由映射到同一個組件，在?Vue?Router?中，我們可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動態(tài)路由相關(guān)知識給大家介紹的非常詳細，需要的朋友參考下吧2022-08-08
vue-pdf插件實現(xiàn)pdf文檔預覽方式(自動分頁預覽)
這篇文章主要介紹了vue-pdf插件實現(xiàn)pdf文檔預覽方式(自動分頁預覽)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09