由於第一次接觸vue-router vue-cli iview-admin,所以很多地方還是比較蒙的,項目開發差不多了想自己在本地看看,然后試着運行npm run build,結果發現打包完成的index.html打開是空白的。
后來追着大神問找到了解決辦法。
iview-admin是用的cli3.0,所以之前的的build文件夾以及里面經常配置的文件是沒有的,這些配置可以在項目根目錄的vue.config.js中配置。
首先,baseUrl是要修改的,clone下來的iview-admin中的vue.config.js中有寫到
// 項目部署基礎
const BASE_URL = '/iview-admin/'//將baseUrl的值設為 ‘./’即可,修改如下:baseUrl: './ '
接下來還需要配置router文件夾下的index.js中router的mode為hash
const router = new Router({
routes,
mode: 'hash' // 項目中本來mode: 'history'
})
此時可以進行打包了,打包完畢后可以在本地打開你的index.html文件預覽,但是發現,圖片字體等資源都是未找到,通過f12查看css里的圖片路徑發現,引入的路徑是css/img/xxx.png,但是打包完畢的img文件夾和css文件夾是在一個目錄里,自行移動一下就解決了。
至此打包完畢,謝謝那個不厭其煩指導我的大神,哈哈。
還有一個就是引入jQuery插件如下圖

這樣就引入完成了,去試試吧