电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue項目,npm run build后,報路徑錯的問題

瀏覽:126日期:2022-12-08 15:47:00

在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項目,npm run build后,報路徑錯的問題

3.動態綁定src 應使用require方式引入

解決vue項目,npm run build后,報路徑錯的問題

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

解決vue項目,npm run build后,報路徑錯的問題

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

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

解決vue項目,npm run build后,報路徑錯的問題

以上這篇解決vue項目,npm run build后,報路徑錯的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 湖南教师资格网-湖南教师资格证考试网 | 采暖炉_取暖炉_生物质颗粒锅炉_颗粒壁炉_厂家加盟批发_烟台蓝澳采暖设备有限公司 | 微型实验室真空泵-无油干式真空泵-微型涡旋耐腐蚀压缩机-思科涡旋科技(杭州)有限公司 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 | 高中学习网-高考生信息学习必备平台| 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 液压压力机,液压折弯机,液压剪板机,模锻液压机-鲁南新力机床有限公司 | 304不锈钢无缝管_不锈钢管厂家 - 隆达钢业集团有限公司 | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 辽宁资质代办_辽宁建筑资质办理_辽宁建筑资质延期升级_辽宁中杭资质代办 | 螺纹三通快插接头-弯通快插接头-宁波舜驰气动科技有限公司 | 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | 别墅图纸超市|别墅设计图纸|农村房屋设计图|农村自建房|别墅设计图纸及效果图大全 | 济南律师,济南法律咨询,山东法律顾问-山东沃德律师事务所 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 棕刚玉_白刚玉_铝酸钙-锐石新材料| 挤塑板-XPS挤塑板-挤塑板设备厂家[襄阳欧格] | 流量检测仪-气密性检测装置-密封性试验仪-东莞市奥图自动化科技有限公司 | 「安徽双凯」自动售货机-无人售货机-成人用品-自动饮料食品零食售货机 | 垃圾处理设备_餐厨垃圾处理设备_厨余垃圾处理设备_果蔬垃圾处理设备-深圳市三盛环保科技有限公司 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | H型钢切割机,相贯线切割机,数控钻床,数控平面钻,钢结构设备,槽钢切割机,角钢切割机,翻转机,拼焊矫一体机 | sus630/303cu不锈钢棒,440C/430F/17-4ph不锈钢研磨棒-江苏德镍金属科技有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 艺术生文化课培训|艺术生文化课辅导冲刺-济南启迪学校 | MTK核心板|MTK开发板|MTK模块|4G核心板|4G模块|5G核心板|5G模块|安卓核心板|安卓模块|高通核心板-深圳市新移科技有限公司 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 超声波清洗机-超声波清洗设备定制生产厂家 - 深圳市冠博科技实业有限公司 | 品牌设计_VI设计_电影海报设计_包装设计_LOGO设计-Bacross新越品牌顾问 | 聚合甘油__盐城市飞龙油脂有限公司 | 造价工程师网,考试时间查询,报名入口信息-网站首页 | 泥浆在线密度计厂家-防爆数字压力表-膜盒-远传压力表厂家-江苏大亚自控设备有限公司 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 压砖机_电动螺旋压力机_粉末成型压力机_郑州华隆机械tel_0371-60121717 | 驾驶人在线_专业学车门户网站 | IP检测-检测您的IP质量 | 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 |