vue.js項(xiàng)目打包上線的圖文教程
最近一直堅(jiān)持每個(gè)月寫(xiě)一個(gè)小的vue.js 開(kāi)發(fā)的項(xiàng)目,最后開(kāi)發(fā)完成后想到很久之前給別人回答的一個(gè)問(wèn)題:vue的項(xiàng)目如何上線,當(dāng)時(shí)有千奇百怪的回答,我在想,這些人都是腫了么,vue的官方都說(shuō)了,這個(gè)框架只是做了view這一層,所以并不是把這些開(kāi)發(fā)完的東西直接拷貝到服務(wù)器上,而且需要打包為靜態(tài)文件上傳服務(wù)器的。這里我簡(jiǎn)單的列出這個(gè)過(guò)程:
首先需要修改一下配置文件再打包,很多人都是遇到過(guò)打包后運(yùn)行一片空白等等問(wèn)題,這些問(wèn)題主要就是路徑的問(wèn)題,所以需要修改config下面的index.js這個(gè)配置文件里選項(xiàng):
上圖中第一個(gè)要修改的就是靜態(tài)文件的路徑,打包后靜態(tài)文件就在當(dāng)前目錄下,所以修改為./
第二個(gè)是環(huán)境設(shè)置為生產(chǎn)環(huán)境
修改好后打開(kāi)cmd運(yùn)行下面的命令打包即可:
注意下面的tip,告訴你這個(gè)打包后的文件需要放到服務(wù)器才能打開(kāi),不能直接使用瀏覽器打開(kāi),打包后的文件結(jié)構(gòu)如下:
這時(shí)我們需要使用服務(wù)器的方式來(lái)訪問(wèn)index.html就可以了。這里可能很多人也會(huì)遇到一些問(wèn)題,比如大家可能在開(kāi)發(fā)的時(shí)候使用的proxytable來(lái)解決跨域的問(wèn)題,這里就會(huì)沒(méi)有數(shù)據(jù)了,這個(gè)需要自己通過(guò)服務(wù)器在解決一下才可以的,proxytable在這里只是為了方便大家開(kāi)發(fā)的跨域解決方案。
以上這篇vue.js項(xiàng)目打包上線的圖文教程就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書(shū)寫(xiě)Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時(shí)候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02Vuex modules模式下mapState/mapMutations的操作實(shí)例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級(jí)版,是一套基于vue2與vue3的桌面端組件庫(kù),它提供了豐富的組件幫助開(kāi)發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁(yè)面,本文給大家介紹了Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下2024-08-08vuejs+element-ui+laravel5.4上傳文件的示例代碼
本篇文章主要介紹了vuejs+element-ui+laravel5.4上傳文件的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Vue路由回退的完美解決方案(vue-route-manager)
最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問(wèn)題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09elementUI使用el-upload上傳文件寫(xiě)法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)
upload上傳是前端開(kāi)發(fā)很常用的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于elementUI使用el-upload上傳文件寫(xiě)法及避坑的相關(guān)資料,包括上傳圖片/視頻到本地/服務(wù)器及回顯+刪除,需要的朋友可以參考下2023-03-03利用vue寫(xiě)todolist單頁(yè)應(yīng)用
有很多關(guān)于vue的todolist小程序,這篇文章主要介紹了 用vue寫(xiě)todolist單頁(yè)應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12element多選表格中使用Switch開(kāi)關(guān)的實(shí)現(xiàn)
當(dāng)在做后臺(tái)管理系統(tǒng)的時(shí)候,會(huì)用到用戶的狀態(tài)管理這個(gè)功能,本文主要介紹了element多選表格中使用Switch開(kāi)關(guān)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)
今天小編就為大家分享一篇Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08