Vue應用部署到服務器的正確方式
很多時候我們發現辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后,會發現或多或少的問題,比如:頁面出現空白現象,獲取資源路徑不對等,我相信以VueJs為技術棧來進行前端開發的小伙伴或多或少都會遇到這樣的問題,我也遇到過,那現在我們就來一一解決這樣的問題。
如何打包基于Vue-Cli,通過npm run build來進行打包的操作
如何部署將打包出來的資源,基于Vue-Cli的一般是dist目錄下有static目錄和index.html文件,可以直接將這兩個文件扔到服務端
但有時候,我們會直接將dist文件扔到服務端
出現的問題打包到服務器后,出現資源引用路徑的問題
打包到服務器后,出現空白頁的問題
打包到服務器后,出現引入的css的type被攔截轉換為"text/plain"問題
打包到服務器后,出現路由刷新404的問題
出現資源引用路徑的解決方案一般這個問題是由于在webpack配置打包發布的目錄造成的。
情況一.如果是將static與index.html直接放在服務器根目錄,也就是說,當前的應用訪問的網址如:http://www.xxx.com
解決辦法:
配置輸出的publiPath:"/"或者"./"
情況二.直接將打包后的dist文件放在了服務器的根目錄,也就是如果需要訪問當前的應用,訪問的網址如:http://www.xxx.com/dist
解決辦法:
首先需要在創建路由實例中增加:
const router = new VueRouter({
mode: "history",
base: "/mobile/",
scorllBehavior: () => ({
y: 0
}),
routes
});
然后再打包發布目錄:
publiPath:"/dist/"或者"http://www.xxx.com/dist/"
今天做的應用發布到服務器上,發現當刷新當前路由的時候,就會出現404的狀況,其實這是
因為當刷新當前頁面時候,所需要訪問的資源在服務器上找不到,也就是說,我們在VueJs開發應用的過程中,設置路由的路徑不是真實存在的路徑,并且使用了history模式。
解決辦法
需要后端進行配合,參考https://router.vuejs.org/en/essentials/history-mode.html
出現引入的css的type被攔截轉換為"text/plain"問題這是我開發過程中遇到的感覺很奇葩的問題,我們都知道,一般基于Vue-Cli,通過WebPack打包后的資源不需要更改什么??墒俏野l現,當我把代碼進行上傳后,輸入網址,看見的頁面把我嚇壞了,發現所有樣式不存在了,第一反應就是認為是自己在進行打包配置過程中出現了什么問題,然后通過fillder進行調試,發現css文件是正確獲取到的
可以看到,這個css文件的type被攔截轉換為"text/plain",這時候,我又把相關的配置文件看了兩遍,后面發現,真的是日了狗了,讓我哭一會兒。先上圖
我擦,原來是服務器端返回的類型居然是"text/plain"。這個問題很好解決,把這圖直接給后端,是不是感覺被坑了/(ㄒoㄒ)/~~。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83999.html
摘要:是目前使用最為火熱的打包工具,各大知名的框架類庫都用其打包,國內使用最近也火熱起來。但是坑也很多,比如說圖片,字體等文件的路徑。 webpack 是目前使用最為火熱的打包工具,各大知名的框架類庫都用其打包,國內使用最近也火熱起來。它在單頁應用和類庫打包上幫助許多人從代碼管理中解脫了出來,成為了當下風靡一時的打包工具。 但是坑也很多,比如說圖片,字體等文件的路徑。 剛開始用webpack...
摘要:有兩種方法,一種是在開發環境中設置通過的,另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了,打包后訪問也不用手動去除統一管理在項目開發過程中,會涉及到很多接口的處理,當項目足夠大時,就需要統一管理接口。 這篇文章總結了vue項目的所遇到的問題,包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理,性能優化等內容。 項目github地址 : 前端 https:...
摘要:首先,的命令和并不能在全局使用。文章有意將瀏覽器不能訪問服務器的兩個問題寫出來,是因為作者在排查問題的時候,發現在服務器直接訪問的頁面,能很好地檢查排除問題在百度尋找問題答案的時候,發現這種做法也得到了不少人的肯定。 前段時間要把項目部署到服務器,期間踩了不少的坑。故寫下這篇文章,從零開始把自己部署的過程都記錄下來,希望能給其他像我一樣的小白一點幫助。如果有疏漏的地方,請各位客官指出,...
閱讀 737·2021-11-11 16:54
閱讀 3053·2021-09-26 09:55
閱讀 2002·2021-09-07 10:20
閱讀 1198·2019-08-30 10:58
閱讀 1039·2019-08-28 18:04
閱讀 697·2019-08-26 13:57
閱讀 3581·2019-08-26 13:45
閱讀 1150·2019-08-26 11:42