vue-cli配置多入口多出口,實現一個項目兩個訪問地址,區分不同上線環境


最近工作中需要把項目分割成兩塊,一塊需要跑在微信中,通過微信jdk獲取用戶資料默認登錄,一部分需要給原生app做webview的內嵌頁面,當然這部分內容是不跑在微信中的。

 

所以我想到了把項目分成兩部分,不同的入口來控制是否獲取微信的個人信息,比如原入口main.js中調用微信接口,獲取用戶信息,並攜帶用戶信息的token標識。

而從inlay.js進入的則不調用微信接口,不獲取用戶信息。

 

並且npm run build后打包完后dist目錄下出現兩個入口: index.html 和 inlay.html  分別對應 main.js 和 inlay.js

 

在查閱了一些資料后對vue-cli生成的webpack進行了如下修改: 

1.修改項目文件結構:

 

2. 修改 build/webpack.base.conf.js

 

3. 修改 build/webpack.dev.conf.js

 

 

4.修改 build/webpack.prod.conf.js

 

5. 修改 config/index.js

 

文件流大概是這樣的: 

main.js ==> entry/App.vue 

inlay.js ==> entry/inlay.vue  

 

當然也可以通過路由控制走一個router-view, 總之,進了不同的入口就可以通過不同的入口進行控制,也可以通過不同的路由,不同的axios配置進行控制,並且打包出來有不同的出口,也就是部署以后有兩個url:

 

www.xxx.com     和   www.xxx.com/inaly.html

 

可以到我github上查看demo的源碼: https://github.com/Jasonwang911/numtller


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM