今天給各位分享vue項目怎么運行起來eclipse的知識，其中也會對eclipse vuejs進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

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

vue cli3項目打包部署到tomcat服務(wù)器運行

步驟：

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

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

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

四、添加空路由

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

七、適配到EOS中使用

7.1、改變原EOS項目中的首頁配置

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

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

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

Vue項目啟動加載邏輯介紹

下面說下Vue項目啟動的加載邏輯：

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

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

程序運行index.html后會尋找用到app的文件，即main.js

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

打開App.vue文件，查看配置有router-link和router-view

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

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

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

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

接下來加載的就是具體的功能模塊了

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

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

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

eclipse安裝vue插件失敗

解決方案：

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

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

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

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

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

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

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

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

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

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

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

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

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

4.在vue項目的文件中設(shè)置斷點

5.啟動vue項目：

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

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

遇到的問題：

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

參考：

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

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