vue+vue-router 打包後遇到的一系問題
阿新 • • 發佈:2019-01-03
寫完專案( vue-cli )直接 npm run build 之後,生成了一個dist 資料夾,裡面有一個index.html和一個static資料夾,把dist資料夾放在我的wamp的www目錄下,然後訪問127.0.0.1/dist/,發現如下問題
1.訪問index.html檔案沒有內容,檢查發現是因為index檔案裡的css和js路徑有錯
解決方法:修改原始碼config資料夾下的index.js ,
assetsPublicPath: '/' -》 assetsPublicPath: './' (主要)
productionSourceMap: true -》 productionSourceMap: false (修改這個會使build後的檔案大小劍俠一半)
2.如上修改後,再次build,發現index檔案能夠訪問了,但是圖片都沒了,檢查元素髮現又是因為路徑的問題
解決方法:修改原始碼build檔案下utils.js 加一行程式碼:publicPath:'../../'
*3.再次build後,訪問,大體上沒有問題了,但是我發現通過 $router 計算出來的圖片路徑失蹤了,並且手動輸入url不能訪問,點選事件過去的能夠訪問
解決方法: 在配置路由的函式裡,把mode: 'history' 改為 mode: 'hash'
ps : history需要後臺配合實現,其實手動url還是有有點的,可以防止一些攻擊