自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你

记录一下解决办法:

webpack module配置:(build目录下webpack.base.conf.js文件)

{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

webpack 的utils.js 修改:(build目录下utils.js文件)

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

只是加了  publicPath: '../../'

然后打包字体图片就可以显示了

vue项目打包部署elementUI的字体图标丢失问题的更多相关文章

  1. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  3. Vue项目打包部署到apache服务器

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...

  4. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  5. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  6. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

  7. vue-cli创建的项目打包成app引入字体图标的问题

    将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https

  8. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  9. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

随机推荐

  1. Android进阶——Crash异常捕获并发送到服务器

    在项目中,我们常常会遇到Crash的现象,也就是程序崩溃的时候,这个时候最常看到的就是这个界面 如果你的项目已经发布到市场上了,这样的崩溃对于开发人员是看不到的,所以我们得想方法将崩溃信息发送到服务器 ...

  2. 高级变量类型(列表,元组,字典,字符串,公共方法,变量高级)for循环

    Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (int) 浮点型(float) 布尔型(bool) 真 True 非 0 数 -- 非零即真 假 False 0 复数型 (co ...

  3. xdc如何设置输入延时

    常用命令: Set_input_delay,create_clock,set_output_delay以及用于组合逻辑的set_max_delay. Input delay: 什么是输入延时? Tra ...

  4. selenium爬取优酷页面并下载图片

    from selenium import webdriver import requests driver = webdriver.Chrome() #打开优酷 driver.get("ht ...

  5. MySQL优化查询相关

    [查询优化相关] 1.如何定位相关慢的查询: a.可以开启慢查询日志,也可以使用show profiles 去记录相关查询到一个临时表再分析. b.show processlist  看看有没有大量等 ...

  6. HGP|VCG|UK10K|中科院职业人群队列研究计划|药物基因组学

    全球性计划:表观组计划:肝计划 测1000人的变异level HGP计划三个阶段,范围逐步扩大和深化. Pilot:deep sequence---low coverage Phase 1 Phase ...

  7. [极客大挑战 2019]PHP

    0x00知识点 1:直接扫描目录得到网站源码. 2:public.protected与private在序列化时的区别 protected 声明的字段为保护字段,在所声明的类和该类的子类中可见,但在该类 ...

  8. idea代理上网

    idea 代理上网 浏览器能够上网,idea无法下载jar 浏览器无法上网则配置浏览器代理 --------- start //------------------------浏览器代理完毕 idea ...

  9. ModernRNN

    GRU RNN存在的问题:梯度较容易出现衰减或爆炸(BPTT) ⻔控循环神经⽹络:捕捉时间序列中时间步距离较⼤的依赖关系 RNN: \[ H_{t} = ϕ(X_{t}W_{xh} + H_{t-1} ...

  10. PDO是一个“数据库访问抽象层”

    PDO是一个"数据库访问抽象层",作用是统一各种数据库的访问接口,与mysql和mysqli的函数库相比,PDO让跨数据库的使用更具有亲和力:与ADODB和MDB2相比,PDO更高 ...