1. 程式人生 > >webpack開發vue2專案中的一些坑(1、跨域 2、打包後後端訪問一片空白3、載入第三方庫的字型檔案出錯4、載入背景圖出錯)

webpack開發vue2專案中的一些坑(1、跨域 2、打包後後端訪問一片空白3、載入第三方庫的字型檔案出錯4、載入背景圖出錯)

1、在開發除錯過程中,解決跨域的問題

例:本地伺服器:localhost:3030  伺服器地址:192.111.1.1:4000(虛構)

webpack配置:

devServer: {
        contentBase: "./static/",
        host: 'localhost',
        port: 3030,
        inline: true,
        hot: true,
        noInfo: true,
        proxy: {
           
            '/api/*': {
                target: 'http://192.111.1.1:4000',
                secure: false,
                changeOrigin: false // false
            }
]
}
js介面寫法(不用寫域名)

this.$http('/api/login' ,{}).then()

2、打包後部署時的一些坑(注:static資料夾和index.htm平級

(1 )打包釋出後,訪問一片空白,除了載入到index.html的title資訊

 假如java後端存放前端檔案的資料夾為WebApps

前端在router/index.js中指定base(名稱可為專案名稱)


(2)載入第三方字型檔案出錯404,例如載入了iview的css和字型

將字型檔案拷貝到static/fonts檔案下,

css拷貝到static/css檔案下,

修改css中的字型檔案引用路徑,css在index.html中引入,不在router/index.js中通過@import引入

(3)背景圖載入404

比如我在router/index.js中指定了base名稱為‘zxy’,全域性圖片存放在static/images下,修改為絕對路徑,

ps:在本地開發環境中需要去掉/zxy


(4) 執行完以上步驟,再修改config/index.js

assetsPublicPath:' ./ '


(5)將打包後的dist資料夾,修改名稱為zxy, 將整個檔案放在後端目錄WebApps下面,就可以訪問了

例如:登入頁面:192.111.1.1/zxy/login

相關推薦

webpack開發vue2專案一些1 2打包訪問空白3載入第三方字型檔案出錯4載入背景出錯

1、在開發除錯過程中,解決跨域的問題 例:本地伺服器:localhost:3030  伺服器地址:192.111.1.1:4000(虛構) webpack配置: devServer: {

framework7+vue+webpack 開發web app商城之旅1

公司要求使用 framework7+vue+webpack 開發一個web app,關於framework7,vue,webpack的相關介紹就不再贅述,接下來都只是介紹我用framework7+vue+webpack開發這個web app遇到的問題(因為framework7

在Unity3D開發射擊遊戲的一些思路1

最近有許多朋友問到我一個問題,如何實現像戰地,使命召喚那樣逼真的射擊體驗。首先我們要知道,在沒有動畫師的幫助下,要想實現人為模擬的後坐力,精準度偏移等等其實並不是什麼難事,今天我們就來用較簡短的程式碼來實現一個模擬的槍械後坐力。 首先是我們需要用到的工具類程式碼: publ

第三方接微信登陸,分享,支付的一些1

最近接了公司遺漏專案,另一個安卓走了,接過他留下的bug,有點辛苦主要就在這裡講講接微信的一些問題,花費了我好久,主要出現在登陸部分和支付返回的JSON資料解析,以及分享純圖片時的一些問題。那首先就是去微信公眾平臺註冊,目前好像只支援企業註冊,而且需要支付300元的費用,有點

vue2.0+vue-router2.0+axios+webpack開發webapp專案

前言:本人第一次將vue運用到實際專案中,將實際開發流程簡單描述下(第一次寫部落格,有問題希望及時提出,討厭噴子。) 一.安裝node環境   首先我們需要安裝node環境,這個想必不用多說,可以直接到中文官網http://nodejs.cn/下載安裝包。其

談Java開發 -- log4j2在SaaS專案的應用

背景介紹: 做server端開發有些年頭了,特別是開始做SaaS型別的專案時,深知log的重要性,特別是半夜三更使用者(大都是美國那邊的)遇到問題的電話打過來,這個時候沒有一個強大log,那只有抓瞎的份了。以前都是走的微軟系的開發工具,log的框架也是別人早就寫好的,所以

vue的一些第二天

作用 小童 過濾 文本 click rip col 官方 小數點 首先啊感謝一位小童鞋的指出其實我寫的這些內容算不上坑,只是平時使用的時候的一點小問題,不過只是個名字啦!再次致謝 1:兩個簡寫的命令 v-bind:class可以簡寫為 :class v-on:click可

MongoDB一些最好不要用

ODB 關系 有一種 徹底 是把 shard 內存數據庫 完整 發的 MongoDB 是目前炙手可熱的 NoSQL 文檔型數據庫,它提供的一些特性很棒:如自動 failover 機制,自動 sharding,無模式 schemaless,大部分情況下性能也很棒。但是薄荷在深

python一些待補充

use fault none bsp lis ble list one table 函數默認參數使用可變對象 def use_mutable_default_param(idx=0, ids=[]): ids.append(idx) print(i

Windows Server 2012 搭建FTP伺服器的一些

    Windows Server 2012 搭建 IIS 的 FTP 伺服器被動模式連結失敗,出現 200 Type set to A. 227 Entering Passive Mode; 雲伺服器安全組已新增對應規則,伺服器防火牆已配置入站規則 20-21埠

Windows Server 2012 搭建FTP伺服器的一些

    初衷就是想在雲伺服器上寫程式,為了使本機和雲伺服器之間傳檔案更方便,於是乎搭建FTP伺服器。總結折磨我兩天的一些坑,唉,欲哭無淚啊==     首先從一個已經搭建好的FTP伺服器上下載搭FTP伺服器必須的應用程式:FileZilla,WinRA

SpringCloud的一些以後會持續記錄

記錄一下springCloud的坑 1.現在假設我有2臺機器,A,B機器。A機器裝了註冊中心,裝了xx-Client服務。B機器裝了xx-feign服務。B去調A的時候,會因為註冊中心會返回一個 將ip+埠返回一個隨機域名,就會導致unknowHostException因此不可能考慮一個個地去配

react-native爬1————給現有的Android專案整合

公司專案需要頻繁更新,因此考慮使用react-native給現有的Android專案進行功能補充。研究了2天,官網的資料坑太多,網上的部落格也不適用最新的版本,跑不起來,網上翻了n多篇資料,終於能夠執行起來,開心。現在將react-native整合的詳細跳坑步驟寫一下; (1)前提:需要按照官網

記錄開發踩過的1

做了三年多的程式設計開發,偶爾還是會踩坑,記錄一下 現在工作是維護一個五六年的老專案,例行維護,每個月都有一些新需求,對原有的一些功能做修改,或者是對某部分功能程式碼進行重構。同時一般每2-3個月上一個大的版本,主要是增加一些新功能,由於程式碼邏輯複雜,確認需求後一般開發三個星期左右,這幾週一般

初識React專案遇到的Uncaught ReferenceError: Set is not defined

**前言:每次在android、rn跟h5中切換的時候,程式碼總是會鬧各種笑話,比如在rn中變數都是包含在“{}”只有一層花括號,但是在vue中“{{}}”會有兩層花括號,樣式的話rn是駝峰fontSize這種,但在h5中是font-size,然後在android中老喜歡把一個字串定義為

PHP+MySQL開發專案的集合筆記關聯資料庫,並限制小數位數

需求:先關聯資料,最後顯示資料限制,小數的位數。 MySQL語句: SELECT `ID`,`TDC_PlanningHC`,`TDC_EntryHC`,`TDC_ExitHC`,`Priority_num`,`Priority_char` FROM rmk WH

PHP+MySQL開發專案的集合筆記控制div的排列和p標籤,從另外表讀取加工資料並規定小數點位數

需求:HTML頁面增加註釋,div盒子控制曲線大小,多個盒子相互巢狀。具體資料從另外表內獲取。 HTML頁面更改: <!-- Morris chart - Sales --> <!-- Change! -->

【轉】azkaban的部署過程遇到的一些部署篇

注:azkaban之前有個配置檔案預設要求6G以上可用記憶體的坑,解決完之後今天又遇到了程式碼寫死3G以上記憶體的坑,根據報錯資訊正巧搜到了這篇文章,另外作者的主頁https://my.oschina.net/u/2988360裡也有其他幾篇關於azkaban的文章,推薦

使用UE4開發VR專案_效能優化_思路和方法

  本文是《使用UE4開發VR專案-效能優化》的第三篇。希望能和您分享一下在UE4 VR專案優化的基本思路方法和技巧。   前篇請參考這裡: (四)GPU渲染執行緒分析   如果遇到GPU瓶頸最快的驗證方法是改變解析度 降低解析度可以極大提高幀數   如果幀數有大幅度提高 即是GPU瓶頸。如果影響不大

unity開發遇到的幾個UGUI等

最近開始研究unity,準備將之前自己業餘時間做的一款遊戲(金庸群俠傳X)發行移動端版本(我不是遊戲公司從業人員,業餘時間自己做著玩,大神輕噴)。由於之前使用silverlight(C#)做的,所以移植unity有天然的語言優勢。 看了一下unity的更新公告,4.6出的U