公司一個jquery寫的商城，一個用vue腳手架搭的項目，現在老闆想讓辦公系統的部分模塊寫入商城，越快越好，請問大佬們如何做？

這個不難的，有兩種方式，一種是在傳統項目中，使用iframe載入，同域就行。第二種需要會webpack才可以搞定，其實webpack本身就是用來打包JS的。webpack打包輸出JS和css，或者將css放JS中也可以，不過會很大，在傳統項目中引用css和JS，然後mount到一個el上就可以了。其實我是建議使用第三種方式，用Vue重寫一個項目，使用iframe方式載入傳統項目，隱藏菜單就可以了。後面一種維護是最方便的，而且可以把傳統項目代碼與Vue項目代碼放一起管理，不過也得熟練webpack才行。

謝邀

這類情況基本需要重新用vue來寫了，因為jQuery代碼無法在全部在vue中使用，還是乖乖按照vue的規則重構吧

不知道你們的項目多大，但是我相信，如果沒有大大佬，往jq裡面部分引入vue，大概率是在造屎山，趁著屎山還不大，花個個把月重寫了算了。。。

Vue組件渲染是掛載在指定的el屬性或者$mount(el)對應DOM元素節點下的，使用的vue腳手架的項目的組件要寫入商城項目的話，可以重新在腳手架里配置一個entry, 這個entry指向的vue組件el設置為在jquery項目中的需要引入vue組件的佔位DOM節點。把這個entry打包後的output文件引入jquery項目就能渲染生成DOM了。

上面的方法是兩個項目分開開發，開發完成後把所需vue組件編譯後的js文件引入jquery項目才能看見最終效果，想要做到開發時熱載入顯示效果，就需要把jquery和vue項目融合在一起，需要修改webpack配置，和理清jquery項目是不是純前端項目還是後端MVC框架的view部分，如果是MVC框架的view部分，就帶有後端框架的渲染模版，得重寫模版寫法了和vue項目合併成一個項目。具體情況具體分析。

可以使用iframe嵌套頁面實現(iframe內外的交互通信不方便)

也可以將vue項目打包成多個獨立的頁面組件，jquery項目需要的地方new Vue引入(vue項目中用到的VueRouter/Vuex等全家桶內容需要改造)

  1. 修改 Vue 項目：
  • 添加一個多頁面打包的 webpack 配置。
  • 把布局抽出來，就像登錄註冊一樣，再為多頁面提供一套布局。

2. 在Jquery 項目中添加菜單項。

3. 用 nginx 把兩個項目代理到同一個域名下面，使用不同的路徑前綴區分即可。

Vue 項目中建議建一個單獨的根目錄，把兼容層的東西（包括上面的布局跟配置）都放裡面，當然也要注意按模塊來組織結構。

如果你不想因為VUE和JQUERY的不友好性導致系統的莫名其妙的BUG，建議VUE重構。功能明確情況下比JQUERY開發速度要快。或者你在JQUERY項目中做幾個菜單把VUE的頁面引入進來唄。這樣是最快的

在jq項目跑一個沙盒，把vue代碼扔到裡面去就可以了

可以用react

不建議摻著寫。 最快就是給個鏈接跳過去就行了。

我想知友是想問如何在一個傳統前端項目中引入另一個vue項目的部分模塊？

首先我不太理解知友說的部分模塊是什麼力度，如果是組件級別，那就比較簡單了，2種可能。

  1. 傳統項目新功能(頁面級別，無老功能依賴)使用vue組件實現即可，構建可以分開操作。
  2. 傳統項目沒有純新功能，那麼就需要決心，選擇一個功能(最後是頁面)，用Vue重構，當然這裡關鍵是怎麼做老代碼隔離，不要讓新功能影響到沒有重構部分。

如果知友的新模塊指的是業務功能，那麼這裡方案就畢竟靈活

1.可以將新模塊抽象成組件級別，然後再按上個假設操作

2.可以使用比較火的微前端概念，一個項目中使用多種前端技術框架，知友可以了解一下

3.以vue項目為主，儘力將業務模塊改造為多使用場景模塊，如提供業務SDK或業務獨立頁面，以支持傳統項目使用場景，做到運行時不影響老業務即可

說起來肯定容易，實施肯定考慮的因素會更多更複雜，上面的觀點只是結合自己的一些經驗，提供知友一個簡單參考，也歡迎其他知友一起探討與交流。

根據你的 Vue 項目的不同使用場景來做：

  • 作為新頁面使用：
    • 直接 npm run build 打包出一個單頁面應用，然後傳統項目直接跳轉到該頁面的地址即可，例如 xxx/work/dist/index.html?params=xxx；
  • 作為傳統頁面的一部分使用：
    • 使用 npm run build 打包你的 Vue 應用，把打包出來的 JS 以及 CSS 等 靜態文件，放到你的傳統項目之中；
    • 在你的傳統頁面引入 對應的 JS、CSS 等；
    • 在你要放置辦公模塊的容器（div 之類）添加元素的 ID 為 app（Vue 應用的入口，一般為 #app）。

推薦閱讀：
相关文章