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

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

解決vue項目 build之后資源文件找不到的問題

瀏覽:3日期:2022-11-23 08:04:15

解決靜態資源失效的問題

這就需要修改我們的 config 中的 index.js了,默認的build 中的部分是這樣的:

build: { // Template for index.html index: path.resolve(__dirname, ’../dist/index.html’), // Paths assetsRoot: path.resolve(__dirname, ’../dist’), assetsSubDirectory: ’static’, assetsPublicPath: ’/’,

修改之后的應為這樣的:

build: { // Template for index.html index: path.resolve(__dirname, ’../dist/index.html’), // Paths assetsRoot: path.resolve(__dirname, ’../dist’), assetsSubDirectory: ’static’, assetsPublicPath: ’./’,

但是這樣能確保資源文件可被正常找到, 但頁面還是處于白屏狀態,

在路由頁面找到mode: ’history’,

export default new Router({ mode: ’history’, routes: [

將mode: ’history’,這句話刪除,在進行build,

export default new Router({ // mode: ’history’, routes: [

小伙伴們, 是不是發現好用啦~

補充知識:vue關于build和config文件都已修改,但打包后圖片仍找不到的問題

最開始發現有的圖片可以加載出來有的卻不能,然后去看build和config文件的配置,

解決vue項目 build之后資源文件找不到的問題

解決vue項目 build之后資源文件找不到的問題

都很ok啊。

然后去看那些可以加載出來的跟不能加載的做了對比,發現不能加載出來的都是把路徑寫在js里面,用變量的方式寫進html里面的,最后的解決方式就是:

//以require形式導入圖片

url:require(’../../static/xxx.png’)

然后打包就沒問題了;

后面再補充一下,background屬性引入圖片的話如果以行內元素引入也會造成圖片路徑找不到的情況,解決的辦法就是把它寫在style里面,以類名的方式引入;

總結一下,vue里面引用圖片在打包后仍能正常使用的正確引用方式:

html內:img src以相對路徑引入;

css:style以background屬性作為背景圖片引入,需以類名方式引入,行內樣式可能會不生效;

js:以require(’…/url’)引入,賦予變量;

以上這篇解決vue項目 build之后資源文件找不到的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 合肥制氮机_合肥空压机厂家_安徽真空泵-凯圣精机 | 菏泽知彼网络科技有限公司| 恒温恒湿箱(药品/保健品/食品/半导体/细菌)-兰贝石(北京)科技有限公司 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 陶瓷砂磨机,盘式砂磨机,棒销式砂磨机-无锡市少宏粉体科技有限公司 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 智慧食堂_食堂管理系统_食堂订餐_食堂消费系统—客易捷 | 集装箱展厅-住人集装箱住宿|建筑|房屋|集装箱售楼处-山东锐嘉科技工程有限公司 | 高温高压釜(氢化反应釜)百科 | 宠物店加盟_宠物连锁店_开宠物店-【派多格宠物】 | 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 | 食药成分检测_调料配方还原_洗涤剂化学成分分析_饲料_百检信息科技有限公司 | 膜结构车棚|上海膜结构车棚|上海车棚厂家|上海膜结构公司 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | 热工多功能信号校验仪-热电阻热电偶校验仿真仪-金湖虹润仪表 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 亮点云建站-网站建设制作平台 | 东莞办公家具厂家直销-美鑫【免费3D效果图】全国办公桌/会议桌定制 | 鼓风干燥箱_真空烘箱_高温干燥箱_恒温培养箱-上海笃特科学仪器 | 厂房出租-厂房规划-食品技术-厂房设计-厂房装修-建筑施工-设备供应-设备求购-龙爪豆食品行业平台 | 苏州防水公司_厂房屋面外墙防水_地下室卫生间防水堵漏-苏州伊诺尔防水工程有限公司 | 金库门,金库房,金库门厂家,金库门价格-河北特旺柜业有限公司 | 自动焊锡机_点胶机_螺丝机-锐驰机器人| 电销卡_北京电销卡_包月电话卡-豪付网络| 苏州教学设备-化工教学设备-环境工程教学模型|同科教仪 | 釜溪印象网络 - Powered by Discuz! | 苏州防水公司_厂房屋面外墙防水_地下室卫生间防水堵漏-苏州伊诺尔防水工程有限公司 | 铆钉机|旋铆机|东莞旋铆机厂家|鸿佰专业生产气压/油压/自动铆钉机 | 金联宇电缆总代理-金联宇集团-广东金联宇电缆实业有限公司 | 泰州物流公司_泰州货运公司_泰州物流专线-东鑫物流公司 | 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | SRRC认证|CCC认证|CTA申请_IMEI|MAC地址注册-英利检测 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 卸料器-卸灰阀-卸料阀-瑞安市天蓝环保设备有限公司 | 防潮防水通风密闭门源头实力厂家 - 北京酷思帝克门窗 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 焊锡丝|焊锡条|无铅锡条|无铅锡丝|无铅焊锡线|低温锡膏-深圳市川崎锡业科技有限公司 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 超声波_清洗机_超声波清洗机专业生产厂家-深圳市好顺超声设备有限公司 | 地图标注-手机导航电子地图如何标注-房地产商场地图标记【DiTuBiaoZhu.net】 | 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 |