解决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的图片，系统默认转码为base64

name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)

}

},

依赖资源路径问题（字体、图标）

起因：

系统采用vue + elementUI，但是发现打包之后的字体文件和图标都不能正常显示，报错如下：

解决：

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

ript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串