欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)

 更新時間：2022年05月10日 09:10:12   作者：不情不愿  
本文主要介紹了Vue?項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近一直在嘗試對 Vue 項(xiàng)目進(jìn)行打包和發(fā)布，發(fā)現(xiàn)通過 npm run build 打包生成的 dist 文件不能直接放到服務(wù)器下面進(jìn)行部署，否則會出現(xiàn)以下問題：

究其原因是，無法正確找到相關(guān) js 文件的路徑 。網(wǎng)上查找了很多的解決方案，大多建議修改路由模式（mode:' history '）和發(fā)布的文件路徑（publicPath:' ./ '），但由于腳手架版本的原因，一直找不到相應(yīng)的配置文件，這里使用的是最新版本的 VueCLI 5 創(chuàng)建的項(xiàng)目，官方簡化了許多文件的配置信息（隱藏起來了）。經(jīng)過多次嘗試，最終實(shí)現(xiàn)了 Vue 項(xiàng)目在本地服務(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:'./' //添加配置信息
})

打包運(yùn)行 

npm run build

最終生成的文件目錄為：

將整個 dist 文件夾放到 Tomcat 目錄下的 webapps 目錄下

 啟動 Tomcat 服務(wù)，打開文件目錄或者輸入網(wǎng)址  http://localhost:8080/dist/

運(yùn)行成功。

到此這篇關(guān)于Vue 項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 項(xiàng)目發(fā)布和部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined

    淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined

    這篇文章主要介紹了淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 詳解Vue3 Composition API中的提取和重用邏輯

    詳解Vue3 Composition API中的提取和重用邏輯

    這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究

    Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究

    Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • Vue2中如何使用全局事件總線實(shí)現(xiàn)任意組件間通信

    Vue2中如何使用全局事件總線實(shí)現(xiàn)任意組件間通信

    全局事件總線就是一種組件間通信的方式,適用于任意組件間通信,下面這篇文章主要給大家介紹了關(guān)于Vue2中如何使用全局事件總線實(shí)現(xiàn)任意組件間通信的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • Vue Ref全家桶具體用法詳解

    Vue Ref全家桶具體用法詳解

    ref用來輔助我們獲取DOM元素或組件的引用實(shí)例對象,每個vue的組件實(shí)例上,都包含一個refs對象,里面存儲著對應(yīng)的DOM元素或組件的引用,默認(rèn)情況下,組件的refs指向一個空對象
    2023-03-03
  • Antd中單個DatePicker限定時間輸入范圍操作

    Antd中單個DatePicker限定時間輸入范圍操作

    這篇文章主要介紹了Antd中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue2 cube-ui時間選擇器詳解

    Vue2 cube-ui時間選擇器詳解

    這篇文章主要為大家介紹了Vue2 cube-ui時間選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-12-12
  • Vue--Router動態(tài)路由的用法示例詳解

    Vue--Router動態(tài)路由的用法示例詳解

    這篇文章主要介紹了Vue--Router動態(tài)路由的用法,很多時候，我們需要將給定匹配模式的路由映射到同一個組件，在?Vue?Router?中，我們可以在路徑中使用一個動態(tài)字段來實(shí)現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動態(tài)路由相關(guān)知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2022-08-08
  • vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動分頁預(yù)覽)

    vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動分頁預(yù)覽)

    這篇文章主要介紹了vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動分頁預(yù)覽)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)

    vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)

    這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09

最新評論