解决vue打包后静态资源路径错误的问题

vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下。

图片路径问题

起因:

页面中引入资源的方式往往有如下几种
* HTML标签中直接引入图片, 如 <img src="../assets/images/index.png">
* JS代码中定义资源路径属性,如src: require('../assets/images/index.png')
* CSS代码中定义资源为背景图片,如background-image: url("../assets/images/indexpng")
上述三种资源加载方式还是有所区别的。
前两种无论图片大小,都会使用url-loader加载器将其转化为base64编码的静态资源,而第三种方式则会根据webpack中配置的limit参数,动态选择符合大小要求的图片进行转码,此时则会导致不符合大小选择的图片加载失败,同时报出如下错误。localhost:8080/dist/static/css/static/img/index.254207f.png

解决:

1.保证打包资源路径可用,首先要做的是配置build.js执行时的资源参数,打开config目录下的index.js
看代码:

  	index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',  // 修改为'./'满足资源相对路径

2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js
看代码:

{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,  // 该限制为小于10KB的图片,系统默认转码为base64name: utils.assetsPath('img/[name].[hash:7].[ext]')}
},

依赖资源路径问题(字体、图标)

起因:

系统采用vue + elementUI,但是发现打包之后的字体文件和图标都不能正常显示,报错如下:
在这里插入图片描述

解决:

打开build目录下utils.js,添加路径配置 publicPath: '../../',
看代码:

// Extract CSS when that option is specified
// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../' // 解决element UI打包后字体文件丢失})} else {return ['vue-style-loader'].concat(loaders)}
}

以上内容,全为个人拙见,如有错误,还望指正。

感谢博文:
https://blog.csdn.net/qq_38543537/article/details/90755830
https://segmentfault.com/q/1010000015012074

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DOMBOM(source、methods、contents、Application)

何为DOM&#xff1f; Document Object Model Dom&#xff0c;是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上&#xff0c;组织页面的对象被组织在一个树形结构中&#xff0c;用来表示文档中对象的标准模型就称为DOM。 可以认为DOM是页面上数据和结构的一个树形表示…

spring-注解---IOC(3)

spring--注解---IOC(3) package com.zwj.bean;public class Blue {public Blue(){System.out.println("blue...constructor");}public void init(){System.out.println("blue...init...");}public void detory(){System.out.println("blue...detory..…

在div中设置文字与内部div垂直居中

要实现如图一所示的结果&#xff1a; html代码如下&#xff1a; <!DOCTYPE html> <html><head lang"zh"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta charset"utf-8" /><title>商…

王之泰201771010131《面向对象程序设计(java)》第九周学习总结

第一部分&#xff1a;理论知识学习部分 第7章异常、日志、断言和调试 概念&#xff1a;异常、异常类型、异常声明、异常抛出、 异常捕获1.异常处理技术2.断言的概念及使用3.基本的调试技巧 1&#xff09;异常的概念 a.Java的异常处理机制可以控制程序从错误产生的 位置转移到能…

Java学习——使用Static修饰符

程序功能&#xff1a;通过两个类 StaticDemo、LX4_1 说明静态变量/方法与实例变量/方法的区别。 package Pack1;public class Try {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("静态变量x"StaticDemo.getX());非…

JavaScript从入门到精通之入门篇(一)概念与语法

入门篇大纲 第一部分 概念与语法 1.JavaScript的历史 2.基本概念 3.JavaScript的使用、调试和异常处理 4.基本词法和变量 5.数据类型和类型转换 6.运算符 算数运算符 赋值运算符 一元运算符 使用一元运算符&#xff0c;将会把所有的内容转换为数值运算&#xff0c;不…

【小记】-005--纯CSS实现的小玩意儿

效果图奉上 代码奉上 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…

JavaScript从入门到精通之入门篇(二)函数和数组

入门篇大纲 第二部分 函数与数组 1.函数 函数的定义 普通函数 function 函数名 &#xff08;表达式1…&#xff09; { 代码块 }js是解释性语言&#xff0c;在当前script标签代码执行的开始阶段&#xff0c;就会将普通函数放入堆中&#xff0c;也只是将引用放入堆中&#xf…

一道Python面试题

无意间&#xff0c;看到这么一道Python面试题&#xff1a;以下代码将输出什么&#xff1f; def testFun(): temp [lambda x : i*x for i in range(4)] return temp for everyLambda in testFun(): print (everyLambda(2))脑中默默一想&#xff0c;这还用说么&#xff0c;肯定是…

Windows下的ssh姐妹花 Xshell 和 Xftp

Windows下的ssh姐妹花 Xshell 和 Xftp 今天是3月8号&#xff0c;中国传统的三八妇女节&#xff0c;是距离中国新兴节日三七女生&#xff08;神&#xff09;节最近的一个全国性节日&#xff0c;今天我也是宅在家&#xff0c;研究了一下近日工作上遇到的一个纯软件技术问题。废话…

关于数字证书理解的简单整理以及12306站点证书简单分析

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/sundacheng1989/article/details/25540601 首先简单理解一下什么是数字证书。这里是一篇英文文档&#xff0c;描写叙述的非常形象。形象的描写叙述了什么是公钥。什么是私钥。…

Mac中安装Node和版本控制工具nvm遇到的坑

首先说说常规的安装 1. 下载nvm,使用nvm来管理Node版本 官方文档 windows 版本  https://github.com/coreybutler/nvm-windows mac 版本    https://github.com/creationix/nvm#install-script 命令行 尽量不要用brew&#xff0c;免得掉坑 curl -o- https://raw.githubu…

wepy - 与原生有什么不同(x.wpy)使用实例

源码 1 <template>2 <view classmark wx:if"{{showMark}}">3 <view animation"{{animationData}}" class"animCat">4 <image src"http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></…

CSS实现div梯形分割

原理 使用的border边框属性结合svg 转换 详见代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css实现div边框斜角</title><style type"text/css"> .labels {display: i…

算法学习——决策单调性优化DP

update in 2019.1.21 优化了一下文中年代久远的代码 的格式…… 什么是决策单调性&#xff1f; 在满足决策单调性的情况下&#xff0c;通常决策点会形如1111112222224444445555588888..... 即不可能会出现后面点的决策点小于前面点的决策点这种情况。 那么这个性质应该如何使用…

SVG画一个箭头

参考菜鸟手册&#xff1a; https://www.runoob.com/svg/svg-tutorial.html 打开菜鸟中的在线工具 在可视化截图拖拉元素绘制箭头 点击command U 查看源码 将源码拷入html代码中&#xff0c;查看效果 最后&#xff0c;贴出源码供大家参考 <!DOCTYPE html> <…

数字签名与HTTPS详解

因为HTTP协议本身存在着明文传输、不能很好的验证通信方的身份和无法验证报文的完整性等一些安全方面的确点&#xff0c;所以才有了HTTPS的缺陷。HTTPS确切的的说不是一种协议&#xff0c;而是HTTP SSL (TSL)的结合体。HTTP报文经过SSL层加密后交付给TCP层进行传输。SSL(安全套…

WPF效果(GIS三维续篇)

去年这个时候简单的摸索了一下三维的GIS相关的东西,也就是仅仅玩耍了一把,这次来点真正用的上的干货效果效果&#xff1a; 1、加载自定义百度样式的瓦片效果 2、加载自定义百度样式的缩放效果 3、快速手动进去咱的大帝都 4、加载海量Mark效果 5、加载海量Mark和简单模型效果 6、…

[19/04/23-星期二] GOF23_创建型模式(工厂模式、抽象工厂模式)

一、工厂模式(分为&#xff1a;简单工厂模式、工厂方法模式、抽象工厂模式) 实现了创建者和调用者的分离 核心本质&#xff1a;1、实例化对象&#xff0c;用工厂方法代替new操作&#xff1b;2、将选择实现类、创建对象统一管理和控制&#xff0c;从而将调用者跟实现类解耦。 简…

Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案

对于早期的chrome, 如果要想显示12px以下的字体&#xff0c;一般通用的方案都是在对应的元素中添加 div {-webkit-text-size-adjust: none; }但是我今天遇到的需求&#xff0c;添加了之后没有反应&#xff0c;而且浏览就根本不支持这种写法。 在网上看到了博客《Chrome浏览器…