1. 程式人生 > 程式設計 >解決vue專案,npm run build後,報路徑錯的問題

解決vue專案,npm run build後,報路徑錯的問題

在build目錄下的webpack.prod.conf.js裡面:

output: {

  path: config.build.assetsRoot,publicPath: "/dist/",// 新增這行程式碼,可解決該問題或者publicPath: "./",也可解決

  filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

},

補充知識:vue專案打包後,npm run build相關配置,以及解決專案打包後,圖片404,背景圖片找不到,iview程式碼出問題的情況


1.首先找到config下的index.js檔案 將build下的assetsPublicPath的斜槓換成./ 操作如下

只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過後 npm run dev的時候直接出現can not Get

解決vue專案,npm run build後,報路徑錯的問題

2.因為打包後生成的是dist資料夾 資料夾中是static資料夾和index.html static資料夾中包含css fonts img js等資料夾 我們寫好的css內容在css資料夾中的app.css中 要訪問的圖片內容在img下 所以要../../才可以訪問到

解決vue專案,報路徑錯的問題

3.動態繫結src 應使用require方式引入

解決vue專案,報路徑錯的問題

4.使用iview,npm run build打包後,總會出現找不到woff字型等情況。在build資料夾下的webpack.prod.conf.js檔案中 將extract改為false 就可以了

解決vue專案,報路徑錯的問題

5.使用iview時,有些樣式我們要自己修改成我們想要的 直接複製出來 新建個style標籤在裡面修改 在dev下訪問正常 npm run build下就出現問題 這個多數是巢狀問題

我當時遇到的是左側選單在開發時,一點問題都沒有。打包後左側選單上面出來好大的空隙。本身調整好的懸停顏色還有字型背景等顏色都沒了 解決方法: 當時專案用的是less 所以我在iview中找到我要重寫的這些css他們的層級巢狀關係,逐級巢狀 就解決了這個問題 如下圖 ivu-layout-sider是ivu-menu-submenu-title的父級 我當時忽略他們的層級關係 沒有巢狀 直接平級的寫在less中了 開發時雖然沒出現問題 但是打包後問題百出 所以建議大家在開發時 要修改元件樣式的時候 也要對應好層級關係

解決vue專案,報路徑錯的問題

以上這篇解決vue專案,報路徑錯的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。