2021-02-18 分類: 網站建設
很多時候我們發(fā)現辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后,會發(fā)現或多或少的問題,比如:頁面出現空白現象,獲取資源路徑不對等,我相信以VueJs為技術棧來進行前端開發(fā)的小伙伴或多或少都會遇到這樣的問題,我也遇到過,那現在創(chuàng)新互聯就來一一解決這樣的問題。
如何打包
如何部署
出現的問題
出現資源引用路徑的解決方案
一般這個問題是由于在webpack配置打包發(fā)布的目錄造成的。
- 配置輸出的publiPath:"/"或者"./"
- const router = new VueRouter({
- mode: 'history',
- base: '/mobile/',
- scorllBehavior: () => ({
- y: 0
- }),
- routes
- });
然后再打包發(fā)布目錄:
- publiPath:"/dist/"或者"http://www.abc.com/dist/"
出現由于路由的history模式下刷新當前路由出現404的問題
今天做的應用發(fā)布到服務器上,發(fā)現當刷新當前路由的時候,就會出現404的狀況,其實這是
因為當刷新當前頁面時候,所需要訪問的資源在服務器上找不到,也就是說,我們在VueJs開發(fā)應用的過程中,設置路由的路徑不是真實存在的路徑,并且使用了history模式。
需要后端進行配合,參考https://router.vuejs.org/en/essentials/history-mode.html
出現引入的css的type被攔截轉換為"text/plain"問題
這是我開發(fā)過程中遇到的感覺很奇葩的問題,我們都知道,一般基于Vue-Cli,通過WebPack打包后的資源不需要更改什么。可是我發(fā)現,當我把代碼進行上傳后,輸入網址,看見的頁面把我嚇壞了,發(fā)現所有樣式不存在了,第一反應就是認為是自己在進行打包配置過程中出現了什么問題,然后通過fillder進行調試,發(fā)現css文件是正確獲取到的
可以看到,這個css文件的type被攔截轉換為"text/plain",這時候,我又把相關的配置文件看了兩遍,后面發(fā)現,真的是日了狗了,讓我哭一會兒。先上圖
我擦,原來是服務器端返回的類型居然是"text/plain"。這個問題很好解決,把這圖直接給后端,是不是感覺被坑了/(ㄒoㄒ)/~~。
新聞名稱:Vue應用部署到服務器的正確方式
文章位置:http://m.newbst.com/news27/101577.html
成都網站建設公司_創(chuàng)新互聯,為您提供網站內鏈、微信公眾號、App設計、網站設計公司、網站導航、軟件開發(fā)
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯
猜你還喜歡下面的內容