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

本文目錄一覽：

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

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

步驟：

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

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

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

四、添加空路由

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

七、適配到EOS中使用

7.1、改變原EOS項(xiàng)目中的首頁配置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

項(xiàng)目運(yùn)行起來后，會先去找入口文件index.html，在index.html中找到其實(shí)例需要掛載的位置，然后找到main.js中實(shí)例創(chuàng)建的地方，去加載組件中的模板，然后通過模板中的router-view，得知需要去查找路由，找到后加載對應(yīng)的模板，如果模板中引用了公共的模板再加載公共模板進(jìn)來，最后把處理后的這些呈現(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)存是否足夠，如果不夠，就需要擴(kuò)大內(nèi)存；

6、檢查eclipse的系統(tǒng)是否安裝了最新的Java版本，如果沒有，就需要安裝最新的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.啟動vue項(xiàng)目：

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

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

遇到的問題：

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

參考：

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

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