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

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

vue打包靜態資源后顯示空白及static文件路徑報錯的解決

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

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

打包之后打開dist的頁面顯示空白:

這個問題以前就處理過,是打包過程中出現錯誤頻率較高的一種,可能有3處地方會出現這種情況

1、記得改一下config下面的index.js中bulid模塊導出的路徑。因為打包后的index.html里邊的內容都是通過script標簽引入的,默認顯示的路徑不對,打開肯定是空白的。

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路由配置里邊默認模式是mode:’hash’(頁面會在路由上加#),有時候改成了history(純凈路由)模式的話,打開也會是一片空白。所以改為hash或者直接把模式配置刪除,讓它默認的就行 。

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

3.也有可能是因為背景圖片路徑沒有配置需要在build/utils.js添加配置publicPath: ’../../’

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

打包后找不到響應路徑:

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

解決方式有兩種,

1.如果要上線的話,需要將你的主域名加在static之前然后他會逐級去訪問打包后的文件。

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

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

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

以上就是個人處理vue打包bug的一些小經驗,希望這些能夠對大家有所幫助。

補充知識:vue打包后路徑多了個/css/static

vue打包后路徑多了個/css/static導致一些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打包靜態資源后顯示空白及static文件路徑報錯的解決就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 液压油缸-液压缸厂家价格,液压站系统-山东国立液压制造有限公司 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 微动开关厂家-东莞市德沃电子科技有限公司 | 微水泥_硅藻泥_艺术涂料_艺术漆_艺术漆加盟-青岛泥之韵环保壁材 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 通风气楼_通风天窗_屋顶风机-山东美创通风设备有限公司 | 吉祥新世纪铝塑板_生产铝塑板厂家_铝塑板生产厂家_临沂市兴达铝塑装饰材料有限公司 | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | 柴油机_柴油发电机_厂家_品牌-江苏卡得城仕发动机有限公司 | 油漆辅料厂家_阴阳脚线_艺术漆厂家_内外墙涂料施工_乳胶漆专用防霉腻子粉_轻质粉刷石膏-魔法涂涂 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 识禅_对禅的了解,从这里开始 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! | 锌合金压铸-铝合金压铸厂-压铸模具-冷挤压-誉格精密压铸 | 环比机械| 样品瓶(色谱样品瓶)百科-浙江哈迈科技有限公司 | 柔软云母板-硬质-水位计云母片组件-首页-武汉长丰云母绝缘材料有限公司 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | 济南办公室装修-厂房装修-商铺装修-工装公司-山东鲁工装饰设计 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 北京乾茂兴业科技发展有限公司| 层流手术室净化装修-检验科ICU改造施工-华锐净化工程-特殊科室建设厂家 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 过跨车_过跨电瓶车_过跨转运车_横移电动平车_厂区转运车_无轨转运车 | 施工电梯_齿条货梯_烟囱电梯_物料提升机-河南大诚机械制造有限公司 | 合肥地磅_合肥数控切割机_安徽地磅厂家_合肥世佳电工设备有限公司 | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 拖链电缆_柔性电缆_伺服电缆_坦克链电缆-深圳市顺电工业电缆有限公司 | 北京公积金代办/租房发票/租房备案-北京金鼎源公积金提取服务中心 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 超声骨密度仪-骨密度检测仪-经颅多普勒-tcd仪_南京科进实业有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 电销卡_稳定企业大语音卡-归属地可选-世纪通信| 没斑啦-专业的祛斑美白嫩肤知识网站-去斑经验分享 |