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來解決跨域的問題，這里就會沒有數(shù)據(jù)了，這個需要自己通過服務器在解決一下才可以的，proxytable在這里只是為了方便大家開發(fā)的跨域解決方案。
以上這篇vue.js項目打包上線的圖文教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在vsCode中書寫Vue頁面時無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關于vsCode中vue文件無法提示html標簽的操作方法,需要的朋友可以參考下2023-03-03
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應式數(shù)據(jù)的時候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問題,下面這篇文章主要給大家介紹了關于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關資料,需要的朋友可以參考下2023-02-02
Vuex modules模式下mapState/mapMutations的操作實例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue3實現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構建功能強大、風格統(tǒng)一的頁面,本文給大家介紹了Vue3實現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下2024-08-08
vuejs+element-ui+laravel5.4上傳文件的示例代碼
本篇文章主要介紹了vuejs+element-ui+laravel5.4上傳文件的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
Vue路由回退的完美解決方案（vue-route-manager）
最近做了一個vue項目關于路由場景的問題,路由如何回退指定頁面,在此做個記錄,這篇文章主要給大家介紹了關于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09
elementUI使用el-upload上傳文件寫法及避坑總結(上傳圖片/視頻到本地/服務器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個功能,下面這篇文章主要給大家介紹了關于elementUI使用el-upload上傳文件寫法及避坑的相關資料,包括上傳圖片/視頻到本地/服務器及回顯+刪除,需要的朋友可以參考下2023-03-03
有很多關于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
element多選表格中使用Switch開關的實現(xiàn)
當在做后臺管理系統(tǒng)的時候，會用到用戶的狀態(tài)管理這個功能，本文主要介紹了element多選表格中使用Switch開關的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)
今天小編就為大家分享一篇Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08