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

您的位置:首頁技術(shù)文章
文章詳情頁

解決vue項(xiàng)目 build之后資源文件找不到的問題

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

解決靜態(tài)資源失效的問題

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

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

修改之后的應(yīng)為這樣的:

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

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

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

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

將mode: ’history’,這句話刪除,在進(jìn)行build,

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

小伙伴們, 是不是發(fā)現(xiàn)好用啦~

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

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

解決vue項(xiàng)目 build之后資源文件找不到的問題

解決vue項(xiàng)目 build之后資源文件找不到的問題

都很ok啊。

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

//以require形式導(dǎo)入圖片

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

然后打包就沒問題了;

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

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

html內(nèi):img src以相對路徑引入;

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

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

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

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 818手游网_提供当下热门APP手游_最新手机游戏下载 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 塑料异型材_PVC异型材_封边条生产厂家_PC灯罩_防撞扶手_医院扶手价格_东莞市怡美塑胶制品有限公司 | 南京欧陆电气股份有限公司-风力发电机官网 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 桥架-槽式电缆桥架-镀锌桥架-托盘式桥架 - 上海亮族电缆桥架制造有限公司 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 滚筒烘干机_转筒烘干机_滚筒干燥机_转筒干燥机_回转烘干机_回转干燥机-设备生产厂家 | atcc网站,sigma试剂价格,肿瘤细胞现货,人结肠癌细胞株购买-南京科佰生物 | 原子吸收设备-国产分光光度计-光谱分光光度计-上海光谱仪器有限公司 | 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 手持气象站_便携式气象站_农业气象站_负氧离子监测站-山东万象环境 | 天然气分析仪-液化气二甲醚分析仪|传昊仪器| 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 控显科技 - 工控一体机、工业显示器、工业平板电脑源头厂家 | MVE振动电机_MVE震动电机_MVE卧式振打电机-河南新乡德诚生产厂家 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 卧涛科技有限公司科技项目申报公司|高新技术企业申报|专利申请 | 365文案网_全网创意文案句子素材站 | 抖音短视频运营_企业网站建设_网络推广_全网自媒体营销-东莞市凌天信息科技有限公司 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂_帽子厂_浙江高普制帽厂 | 净化车间_洁净厂房_净化公司_净化厂房_无尘室工程_洁净工程装修|改造|施工-深圳净化公司 | 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 | uv固化机-丝印uv机-工业烤箱-五金蚀刻机-分拣输送机 - 保定市丰辉机械设备制造有限公司 | 立刷【微电签pos机】-嘉联支付立刷运营中心| 河南道路标志牌_交通路标牌_交通标志牌厂家-郑州路畅交通 | 北京乾茂兴业科技发展有限公司| 专业甜品培训学校_广东糖水培训_奶茶培训_特色小吃培训_广州烘趣甜品培训机构 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 氧化铝球_高铝球_氧化铝研磨球-淄博誉洁陶瓷新材料有限公司 | 高中学习网-高考生信息学习必备平台 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 华溶溶出仪-Memmert稳定箱-上海协烁仪器科技有限公司 |