今天給各位分享vue項(xiàng)目怎么運(yùn)行起來(lái)eclipse的知識(shí)，其中也會(huì)對(duì)eclipse vuejs進(jìn)行解釋?zhuān)绻芘銮山鉀Q你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、vue cli3項(xiàng)目打包部署到tomcat服務(wù)器運(yùn)行
• 2、Vue項(xiàng)目啟動(dòng)加載邏輯介紹
• 3、eclipse安裝vue插件失敗
• 4、在 VS Code 中調(diào)試vue項(xiàng)目

vue cli3項(xiàng)目打包部署到tomcat服務(wù)器運(yùn)行

步驟：

一、找到文件vue.config.js，沒(méi)有則自己創(chuàng)建一個(gè)

二、編寫(xiě)vue.config.js的內(nèi)容

三、修改路由方式，修改為hash，文件位置自己找，vuecli3中在router.ts文件中

四、添加空路由

找到編譯好的文件夾，如果作為獨(dú)立項(xiàng)目，直接拷貝后放到Tomcat里即可，如果是放到另外一個(gè)項(xiàng)目中使用，則拷貝到其它項(xiàng)目中去

七、適配到EOS中使用

7.1、改變?cè)璄OS項(xiàng)目中的首頁(yè)配置

在webapps\default\WEB-INF\web.xml中配置

7.2、修改原EOS項(xiàng)目中的登錄成功的跳轉(zhuǎn)頁(yè)，也是項(xiàng)目主頁(yè)

在webapps\default\coframe\auth\index.jsp中配置

Vue項(xiàng)目啟動(dòng)加載邏輯介紹

下面說(shuō)下Vue項(xiàng)目啟動(dòng)的加載邏輯：

首先前端項(xiàng)目默認(rèn)入口都是index.html

這里有個(gè)DIV的id為app，這里是vue的掛載點(diǎn)，后續(xù)views中的 .vue文件都會(huì)掛載在這里。

程序運(yùn)行index.html后會(huì)尋找用到app的文件，即main.js

這里創(chuàng)建了一個(gè)vue實(shí)例，掛載了#app，也就是index.html中的id為app的div元素，接著加載App.vue中的頁(yè)面

打開(kāi)App.vue文件，查看配置有router-link和router-view

router-link 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下

router-view 會(huì)動(dòng)態(tài)的把對(duì)應(yīng)的組件內(nèi)容渲染到router-view中

上面router-view中加載的內(nèi)容有路由決定，于是再到路由文件查看此路由定義

路由配置文件中如圖所示兩種方式都可以實(shí)現(xiàn)。

接下來(lái)加載的就是具體的功能模塊了

例如在Home.vue這個(gè)模塊中又引入了HelloWorld.vue公共組件模塊

關(guān)聯(lián)了該組件，也會(huì)加載進(jìn)去

項(xiàng)目運(yùn)行起來(lái)后，會(huì)先去找入口文件index.html，在index.html中找到其實(shí)例需要掛載的位置，然后找到main.js中實(shí)例創(chuàng)建的地方，去加載組件中的模板，然后通過(guò)模板中的router-view，得知需要去查找路由，找到后加載對(duì)應(yīng)的模板，如果模板中引用了公共的模板再加載公共模板進(jìn)來(lái)，最后把處理后的這些呈現(xiàn)到瀏覽器中。

eclipse安裝vue插件失敗

解決方案：

1、檢查eclipse版本是否支持vue插件，如果不支持，就需要升級(jí)eclipse版本；

2、檢查eclipse的Marketplace是否可以正常訪問(wèn)，如果訪問(wèn)不了，就需要更換網(wǎng)絡(luò)環(huán)境；

3、檢查vue插件是否正確安裝，如果不正確，就需要重新安裝；

4、檢查vue插件是否與eclipse版本兼容，如果不兼容，就需要升級(jí)vue插件；

5、檢查eclipse的內(nèi)存是否足夠，如果不夠，就需要擴(kuò)大內(nèi)存；

6、檢查eclipse的系統(tǒng)是否安裝了最新的Java版本，如果沒(méi)有，就需要安裝最新的Java版本；

7、檢查eclipse的配置文件是否正確，如果不正確，就需要重新配置；

8、檢查vue插件的安裝包是否損壞，如果損壞，就需要重新下載安裝包；

9、檢查系統(tǒng)是否存在病毒，如果存在，就需要使用殺毒軟件進(jìn)行清除。

在 VS Code 中調(diào)試vue項(xiàng)目

1.VS Code 中安裝Debugger for Chrome擴(kuò)展的最新版本：

2.在config/development.config.js（官網(wǎng)描述的是config/index.js，所以需要根據(jù)具體的項(xiàng)目而定）中添加如下配置：

3.點(diǎn)擊運(yùn)行調(diào)試按鈕，再點(diǎn)擊設(shè)置按鈕，修改launch.json文件，配置如下：

4.在vue項(xiàng)目的文件中設(shè)置斷點(diǎn)

5.啟動(dòng)vue項(xiàng)目：

6.點(diǎn)擊運(yùn)行調(diào)試按鈕，再點(diǎn)擊運(yùn)行小圖標(biāo)，這時(shí)會(huì)彈出新的chrome瀏覽器頁(yè)面。

7.在彈出的瀏覽器窗口的頁(yè)面進(jìn)行操作，觸發(fā)斷點(diǎn)時(shí)會(huì)跳轉(zhuǎn)掉vscode的斷點(diǎn)處。

遇到的問(wèn)題：

官網(wǎng)中的launch.json配置中"url": " "，url的端口是8080，這樣調(diào)試時(shí)瀏覽器頁(yè)面顯示“無(wú)法顯示此網(wǎng)頁(yè)”。這里需要改成自己本地起的服務(wù)的端口號(hào)。

參考：

在 VS Code 中調(diào)試：

vue項(xiàng)目怎么運(yùn)行起來(lái)eclipse的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于eclipse vuejs、vue項(xiàng)目怎么運(yùn)行起來(lái)eclipse的信息別忘了在本站進(jìn)行查找喔。