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