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

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

vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決

瀏覽:103日期:2022-11-30 16:44:44

今天使用vue打包(npm run build)遇到了幾個(gè)坑,在這里分享給大家

打包之后打開(kāi)dist的頁(yè)面顯示空白:

這個(gè)問(wèn)題以前就處理過(guò),是打包過(guò)程中出現(xiàn)錯(cuò)誤頻率較高的一種,可能有3處地方會(huì)出現(xiàn)這種情況

1、記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)榇虬蟮膇ndex.html里邊的內(nèi)容都是通過(guò)script標(biāo)簽引入的,默認(rèn)顯示的路徑不對(duì),打開(kāi)肯定是空白的。

build: { index: path.resolve(__dirname, ’../dist/index.html’), assetsRoot: path.resolve(__dirname, ’../dist’), assetsSubDirectory: ’static’, assetsPublicPath: ’/’, productionSourceMap: true, devtool: ’#source-map’, productionGzip: false, productionGzipExtensions: [’js’, ’css’], bundleAnalyzerReport: process.env.npm_config_report }

這里需要將 assetsPublicPath: ’/’改為assetsPublicPath: ’./’,

2.src里邊router/index.js路由配置里邊默認(rèn)模式是mode:’hash’(頁(yè)面會(huì)在路由上加#),有時(shí)候改成了history(純凈路由)模式的話,打開(kāi)也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除,讓它默認(rèn)的就行 。

export default new Router({//mode: ’history’,mode:’hash’,或者直接不寫(xiě) routes: [{}])}

3.也有可能是因?yàn)楸尘皥D片路徑?jīng)]有配置需要在build/utils.js添加配置publicPath: ’../../’

if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:’../../’, fallback: ’vue-style-loader’ }) } else { return [’vue-style-loader’].concat(loaders) }

打包后找不到響應(yīng)路徑:

這都是比較常見(jiàn)的幾種解決方式,如果將靜態(tài)資源的圖片路徑作為綁定數(shù)據(jù)以js引入,圖片放入了static里面用來(lái)引入這個(gè)頁(yè)面又該怎樣處理呢,如果以絕對(duì)路徑訪問(wèn)vue打包是不會(huì)處理這一類(lèi)的,所以打包后它圖片訪問(wèn)的路徑不會(huì)更改,而打包后dist文件里就只有index.html和webpack不會(huì)處理的static文件夾(vue static/下的文件都不會(huì)被Webpack處理:它們使用相同的文件名,直接拷貝到最終的路徑)

解決方式有兩種,

1.如果要上線的話,需要將你的主域名加在static之前然后他會(huì)逐級(jí)去訪問(wèn)打包后的文件。

return { isShow:true, imgData:’’, myUpPic:’/yourDN/static/img/logo.png’}

2.由于vue將組件訪問(wèn)靜態(tài)資源的路徑配置好了,你可以直接/static來(lái)找到static下的文件,但是這里的問(wèn)題就是你訪問(wèn)的時(shí)候它是逐級(jí)訪問(wèn)這些文件的,所以打包后他還是會(huì)找不到靜態(tài)資源的文件,在這里你就需要將/static改成./static,這樣的話他就會(huì)在打包后的文件夾下直接訪問(wèn)其之下的靜態(tài)資源文件夾。

return { isShow:true, imgData:’’, //myUpPic:’/static/img/logo.png’ myUpPic:’./static/img/logo.png’}

以上就是個(gè)人處理vue打包bug的一些小經(jīng)驗(yàn),希望這些能夠?qū)Υ蠹矣兴鶐椭?/p>

補(bǔ)充知識(shí):vue打包后路徑多了個(gè)/css/static

vue打包后路徑多了個(gè)/css/static導(dǎo)致一些css屬性效果不顯示。

解決方法:

在build/utils.js文件中添加publicPath:’…/…/’,重新打包即可。

if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }); } else { return ['vue-style-loader'].concat(loaders); }

以上這篇vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 吉祥新世纪铝塑板_生产铝塑板厂家_铝塑板生产厂家_临沂市兴达铝塑装饰材料有限公司 | 定做大型恒温循环水浴槽-工业用不锈钢恒温水箱-大容量低温恒温水槽-常州精达仪器 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 岛津二手液相色谱仪,岛津10A液相,安捷伦二手液相,安捷伦1100液相-杭州森尼欧科学仪器有限公司 | 硅胶布|电磁炉垫片|特氟龙胶带-江苏浩天复合材料有限公司 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 预制舱-电力集装箱预制舱-模块化预制舱生产厂家-腾达电器设备 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 二手注塑机回收_旧注塑机回收_二手注塑机买卖 - 大鑫二手注塑机 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 贵州成人高考网_贵州成考网 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 小型单室真空包装机,食品单室真空包装机-百科 | 橡胶电子拉力机-塑料-微电脑电子拉力试验机厂家-江苏天源 | 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业(北京)流体设备有限公司 | 建筑资质代办-建筑企业资质代办机构-建筑资质代办公司 | 聚合甘油__盐城市飞龙油脂有限公司 | 微水泥_硅藻泥_艺术涂料_艺术漆_艺术漆加盟-青岛泥之韵环保壁材 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 土壤水分自动监测站-SM150便携式土壤水分仪-铭奥仪器 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 上海质量认证办理中心 | 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | R507制冷剂,R22/R152a制冷剂厂家-浙江瀚凯制冷科技有限公司 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | 矿用履带式平板车|探水钻机|气动架柱式钻机|架柱式液压回转钻机|履带式钻机-启睿探水钻机厂家 | 优秀的临床医学知识库,临床知识库,医疗知识库,满足电子病历四级要求,免费试用 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 北京软件开发_软件开发公司_北京软件公司-北京宜天信达软件开发公司 | 三板富 | 专注于新三板的第一垂直服务平台| 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 整合营销推广|营销网络推广公司|石家庄网站优化推广公司|智营销 好物生环保网、环保论坛 - 环保人的学习交流平台 | 股指期货-期货开户-交易手续费佣金加1分-保证金低-期货公司排名靠前-万利信息开户 | 艺术漆十大品牌_艺术涂料加盟代理_蒙太奇艺术涂料厂家品牌|艺术漆|微水泥|硅藻泥|乳胶漆 | _网名词典_网名大全_qq网名_情侣网名_个性网名 | 宠物店加盟_宠物连锁店_开宠物店-【派多格宠物】 | 深圳装修_店面装修设计_餐厅设计_装修全包价格-尚泰装饰设计 | 南京种植牙医院【官方挂号】_南京治疗种植牙医院那个好_南京看种植牙哪里好_南京茀莱堡口腔医院 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 |