1. 程式人生 > >vue+vue-router 打包後遇到的一系問題

vue+vue-router 打包後遇到的一系問題

寫完專案( 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還是有有點的,可以防止一些攻擊