詳解vue項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程
經(jīng)過兩天的研究終于將VUE打包后的項(xiàng)目通過BAE發(fā)布到了網(wǎng)上。雖然接口方面還有一下問題但是自己還是很高興的。
首先說一下這個(gè)項(xiàng)目需要用到的技術(shù)，vue+express+git+百度的應(yīng)用引擎BAE。
繼續(xù)編輯終于將自己寫的JSON文件模擬的數(shù)據(jù)也傳上去了。
具體的步驟：
1，首先講寫好的vue項(xiàng)目打包（具體的打包過程我就不在說了，直接npm run build,就會(huì)在VUE項(xiàng)目文件中重新創(chuàng)建一個(gè)dist文件，這個(gè)就是打包好的項(xiàng)目）
2，在百度的應(yīng)用引擎BAE部署一個(gè)項(xiàng)目，一天才2毛錢很便宜。自己玩很劃算。
詳細(xì)的的步驟在https://cloud.baidu.com/doc/BAE/QuickGuide.html上面都有介紹，我用的GIT版本管理工具。一定要選擇nodejs0.10.21-web這個(gè)類型。因?yàn)槲覀冇玫膃xpress框架。根據(jù)步驟創(chuàng)建好自己的庫以后。先自己熟悉一下他的配置文檔。
3，在自己創(chuàng)建的庫里面將espress安裝上去，具體的步驟自己度娘。（npm install -g express-generator 這個(gè)命令一定要有，要不然可能提示express命令找不到）
接下來就是重頭戲了，雖然很簡單，但是我研究了半天。
（1）先將git管理的這個(gè)文件里三個(gè)文件，除了app.conf全部刪掉，然后將創(chuàng)建的express項(xiàng)目中的文件復(fù)制出來放到git 管理的那個(gè)庫里面，git管理的庫的文件名基本上是test1\appid245yn4jb32這個(gè)樣子的。test1是我創(chuàng)建的文件夾，appid245yn4jb32這個(gè)文件夾是git遠(yuǎn)程克隆下來的。將express創(chuàng)建的項(xiàng)目中的文件，包括依賴全部復(fù)制到appid245yn4jb32文件夾下面。同時(shí)將bin文件夾里面的www文件加上js后綴。因?yàn)檫@個(gè)BAE只識(shí)別.js的入口文件。同時(shí)將www文件中的端口改為18080. 因?yàn)锽AE的默認(rèn)端口為18080。
（2）將vue項(xiàng)目中打包好的項(xiàng)目（dist文件夾下面的所有文件）復(fù)制到public文件夾下面，將它原來的刪掉。
這樣將所有文件上傳 ，打開網(wǎng)站，應(yīng)該就可以看到vue項(xiàng)目中的東西了。（不過是沒有數(shù)據(jù)的樣子）
總結(jié)
以上所述是小編給大家介紹的詳解vue項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解
這篇文章主要介紹了Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁共存的方法
這篇文章主要介紹了Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁共存的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題
這篇文章主要介紹了解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue數(shù)據(jù)驅(qū)動(dòng)試圖的實(shí)現(xiàn)方法及原理
當(dāng)Vue實(shí)例中的數(shù)據(jù)（data）發(fā)生變化時(shí),與之相關(guān)聯(lián)的視圖（template）會(huì)自動(dòng)更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動(dòng)視圖是通過其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動(dòng)視圖實(shí)現(xiàn)的核心原理,需要的朋友可以參考下2024-10-10
路由是可以傳遞參數(shù)的，一般使用query進(jìn)行傳參，有兩種方式，本溫酒通過代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
Vue3+Vite實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)實(shí)例代碼
我們?cè)陂_發(fā)大型系統(tǒng)的時(shí)候一般都需要?jiǎng)討B(tài)添加路由,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用詳解
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式
這篇文章主要為大家詳細(xì)介紹了vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10