自己搭建的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. UVALive 3634 数据结构模拟

    这题真是坑啊,题意不明,其实就是往桟里面压入空的set集合,所以之前的询问大小都是只有0,只有add的时候,才会产生新的占空间的集合 用stack和set直接进行模拟 #include <ios ...

  2. stm32h7 hal 库的学习

    stm32h7xx_hal_conf.h 中需要注意的几个地方: HSE_VALUE 这个外接晶振的频率 TICK_INT_PRIORITY 这个 tick 的中断优先级,因为 HAL_DELAY 这 ...

  3. MessageBox.Show的使用

    MessageBox.Show("内容","标题") // 摘要:// 使用指定的帮助文件.HelpNavigator 和帮助主题显示一个具有指定文本.标题.按 ...

  4. caffe中运行mnist

    mnist样本字库嘚图片转换:# coding=utf-8import numpy as npimport struct import matplotlib.pyplot as plt from PI ...

  5. POJ 3321 Apple Tree 树状数组 第一题

    第一次做树状数组,这个东西还是蛮神奇的,通过一个简单的C数组就可以表示出整个序列的值,并且可以用logN的复杂度进行改值与求和. 这道题目我根本不知道怎么和树状数组扯上的关系,刚开始我想直接按图来遍历 ...

  6. Thread.sleep 与Thread.currentThread.sleep 相同

    package com.citi.tm.api.trade.mongo; public class ThreadTest { public static void main(String[] args ...

  7. 吴裕雄--天生自然MySQL学习笔记:MySQL GROUP BY 语句

    GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. GROUP BY 语法 SELECT column_name, funct ...

  8. liburl常见库函数解释

    curl_slist_append - add a string to an slist(单链表) struct curl_slist *headerlist=NULL;static const ch ...

  9. How to get AutoCAD Mtext content

    #region 提取一个图层上的各类元素 [CommandMethod("BlockInLayerCAD")] public void BlockInLayerCAD() { Do ...

  10. 使用pyintaller打包python3.6项目,并用c#调用该脚本

    一.pythoninstaller 打包python项目 前提:安装python3.6环境+pycharm 1. 安装pyinstaller pip install pyinstaller 2. cm ...