解決vue項(xiàng)目,npm run build后,報(bào)路徑錯的問題
在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')
},
補(bǔ)充知識：vue項(xiàng)目打包后，npm run build相關(guān)配置，以及解決項(xiàng)目打包后，圖片404，背景圖片找不到，iview代碼出問題的情況
1.首先找到config下的index.js文件 將build下的assetsPublicPath的斜杠換成./ 操作如下
只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過后 npm run dev的時(shí)候直接出現(xiàn)can not Get
2.因?yàn)榇虬笊傻氖莇ist文件夾 文件夾中是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時(shí),有些樣式我們要自己修改成我們想要的 直接復(fù)制出來 新建個(gè)style標(biāo)簽在里面修改 在dev下訪問正常 npm run build下就出現(xiàn)問題 這個(gè)多數(shù)是嵌套問題
我當(dāng)時(shí)遇到的是左側(cè)菜單在開發(fā)時(shí)，一點(diǎn)問題都沒有。打包后左側(cè)菜單上面出來好大的空隙。本身調(diào)整好的懸停顏色還有字體背景等顏色都沒了 解決方法: 當(dāng)時(shí)項(xiàng)目用的是less 所以我在iview中找到我要重寫的這些css他們的層級嵌套關(guān)系,逐級嵌套 就解決了這個(gè)問題 如下圖 ivu-layout-sider是ivu-menu-submenu-title的父級 我當(dāng)時(shí)忽略他們的層級關(guān)系 沒有嵌套 直接平級的寫在less中了 開發(fā)時(shí)雖然沒出現(xiàn)問題 但是打包后問題百出 所以建議大家在開發(fā)時(shí) 要修改組件樣式的時(shí)候 也要對應(yīng)好層級關(guān)系
以上這篇解決vue項(xiàng)目,npm run build后,報(bào)路徑錯的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3利用v-model實(shí)現(xiàn)父子組件之間數(shù)據(jù)同步的代碼詳解
在Vue 3中,v-model這一指令也得到了升級,使得父子組件之間的數(shù)據(jù)同步變得更加容易和靈活,本文將探討一下Vue 3中如何利用v-model來實(shí)現(xiàn)父子組件之間的數(shù)據(jù)同步,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了vue2.0開發(fā)入門筆記之.vue文件的生成和使用 ,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
Vue框架提供了一些便捷的數(shù)組變異方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的數(shù)組變異方法可以自動觸發(fā)DOM更新，本文就詳細(xì)帶大家了解一下Vue.js數(shù)組的變異方法2023-06-06
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
elementUI select組件value值注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件value值注意事項(xiàng)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色
本文主要介紹了Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue項(xiàng)目打包部署流程,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
vue動態(tài)子組件的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue動態(tài)子組件的兩種實(shí)現(xiàn)方式,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
vue自定v-model實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實(shí)現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09