解決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相關(guān)配置,以及解決項目打包后,圖片404,背景圖片找不到,iview代碼出問題的情況
1.首先找到config下的index.js文件 將build下的assetsPublicPath的斜杠換成./ 操作如下
只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過后 npm run dev的時候直接出現(xiàn)can not Get

2.因為打包后生成的是dist文件夾 文件夾中是static文件夾和index.html static文件夾中包含css fonts img js等文件夾 我們寫好的css內(nèi)容在css文件夾中的app.css中 要訪問的圖片內(nèi)容在img下 所以要../../才可以訪問到

3.動態(tài)綁定src 應(yīng)使用require方式引入

4.使用iview,npm run build打包后,總會出現(xiàn)找不到woff字體等情況。在build文件夾下的webpack.prod.conf.js文件中 將extract改為false 就可以了

5.使用iview時,有些樣式我們要自己修改成我們想要的 直接復(fù)制出來 新建個style標(biāo)簽在里面修改 在dev下訪問正常 npm run build下就出現(xiàn)問題 這個多數(shù)是嵌套問題
我當(dāng)時遇到的是左側(cè)菜單在開發(fā)時,一點問題都沒有。打包后左側(cè)菜單上面出來好大的空隙。本身調(diào)整好的懸停顏色還有字體背景等顏色都沒了 解決方法: 當(dāng)時項目用的是less 所以我在iview中找到我要重寫的這些css他們的層級嵌套關(guān)系,逐級嵌套 就解決了這個問題 如下圖 ivu-layout-sider是ivu-menu-submenu-title的父級 我當(dāng)時忽略他們的層級關(guān)系 沒有嵌套 直接平級的寫在less中了 開發(fā)時雖然沒出現(xiàn)問題 但是打包后問題百出 所以建議大家在開發(fā)時 要修改組件樣式的時候 也要對應(yīng)好層級關(guān)系

以上這篇解決vue項目,npm run build后,報路徑錯的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue瀏覽器鏈接與接口參數(shù)實現(xiàn)加密過程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實現(xiàn)加密過程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
Vue3中導(dǎo)入和使用圖標(biāo)庫Font Awesome的實現(xiàn)步驟
Font Awesome 是互聯(lián)網(wǎng)的圖標(biāo)庫和工具包,被數(shù)百萬設(shè)計師、開發(fā)人員和內(nèi)容創(chuàng)建者使用,Font Awesome的圖標(biāo)非常豐富,基本涵蓋你所需要的所有,本文給大家介紹了Vue3中導(dǎo)入和使用圖標(biāo)庫Font Awesome的具體步驟,需要的朋友可以參考下2025-01-01
vue3中使用@vueuse/core中的圖片懶加載案例詳解
這篇文章主要介紹了vue3中使用@vueuse/core中的圖片懶加載案例,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue中Element的table多選表格如何實現(xiàn)單選

