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

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

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

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

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

最終生成的文件目錄為：

將整個(gè) dist 文件夾放到 Tomcat 目錄下的 webapps 目錄下

 啟動(dòng) Tomcat 服務(wù)，打開(kāi)文件目錄或者輸入網(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)容請(qǐng)搜索腳本之家以前的文章或繼續(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，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • 詳解Vue3 Composition API中的提取和重用邏輯

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

    這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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ì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    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用來(lái)輔助我們獲取DOM元素或組件的引用實(shí)例對(duì)象,每個(gè)vue的組件實(shí)例上,都包含一個(gè)refs對(duì)象,里面存儲(chǔ)著對(duì)應(yīng)的DOM元素或組件的引用,默認(rèn)情況下,組件的refs指向一個(gè)空對(duì)象
    2023-03-03
  • Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作

    Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作

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

    Vue2 cube-ui時(shí)間選擇器詳解

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

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

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

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

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

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

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

最新評(píng)論