vue.js項(xiàng)目打包上線的圖文教程
最近一直堅(jiān)持每個(gè)月寫一個(gè)小的vue.js 開發(fā)的項(xiàng)目，最后開發(fā)完成后想到很久之前給別人回答的一個(gè)問題：vue的項(xiàng)目如何上線，當(dāng)時(shí)有千奇百怪的回答，我在想，這些人都是腫了么，vue的官方都說了，這個(gè)框架只是做了view這一層，所以并不是把這些開發(fā)完的東西直接拷貝到服務(wù)器上，而且需要打包為靜態(tài)文件上傳服務(wù)器的。這里我簡單的列出這個(gè)過程：
首先需要修改一下配置文件再打包，很多人都是遇到過打包后運(yùn)行一片空白等等問題，這些問題主要就是路徑的問題，所以需要修改config下面的index.js這個(gè)配置文件里選項(xiàng)：
上圖中第一個(gè)要修改的就是靜態(tài)文件的路徑，打包后靜態(tài)文件就在當(dāng)前目錄下，所以修改為./
第二個(gè)是環(huán)境設(shè)置為生產(chǎn)環(huán)境
修改好后打開cmd運(yùn)行下面的命令打包即可：
注意下面的tip，告訴你這個(gè)打包后的文件需要放到服務(wù)器才能打開，不能直接使用瀏覽器打開，打包后的文件結(jié)構(gòu)如下：
這時(shí)我們需要使用服務(wù)器的方式來訪問index.html就可以了。這里可能很多人也會(huì)遇到一些問題，比如大家可能在開發(fā)的時(shí)候使用的proxytable來解決跨域的問題，這里就會(huì)沒有數(shù)據(jù)了，這個(gè)需要自己通過服務(wù)器在解決一下才可以的，proxytable在這里只是為了方便大家開發(fā)的跨域解決方案。
以上這篇vue.js項(xiàng)目打包上線的圖文教程就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue elementui 動(dòng)態(tài)追加下拉框、輸入框功能
這篇文章主要介紹了vue elementui 動(dòng)態(tài)追加下拉框、輸入框功能,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞
在前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,因其易學(xué)易用而受到許多開發(fā)者的青睞,其中,組件是 Vue 的核心概念之一,組件之間的數(shù)據(jù)傳遞是開發(fā)中的常見需求,本文將探討如何在 Vue 中實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2024-11-11
在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程,Cesium是一個(gè)強(qiáng)大的JavaScript庫,支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中的 v-model組件封裝(類似彈窗組件),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue3封裝簡易的vue-echarts問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式詳解
在?B?端業(yè)務(wù)中,我們經(jīng)常會(huì)遇到文本內(nèi)容超出容器區(qū)域需顯示省略號(hào)的需求,當(dāng)鼠標(biāo)移入文本時(shí),會(huì)出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場景,接下來給大家介紹vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式,需要的朋友可以參考下2024-04-04
使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值需要的朋友可以參考下2019-08-08
Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和異步組件原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05