自己搭建的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. Standard Aras Dialogs

    In a another blog post, we covered how to open dialogs within Aras Innovator using custom forms and ...

  2. 设置Apache(httpd)和Nginx 开机自启动

     方法1: 进入目录: vi  /etc/rc.d/rc.local #设置apache 和 nginx 开机自启动/usr/sbin/apachectl start/usr/sbin/nginx s ...

  3. 2016蓝桥杯省赛C/C++A组第三题 方格填数

    题意:如下的10个格子  填入0~9的数字.要求:连续的两个数字不能相邻. (左右.上下.对角都算相邻) 一共有多少种可能的填数方案? 分析:dfs,划定边界,行1~4,列1~3,初始化为INT_IN ...

  4. POJ 3258:River Hopscotch 二分的好想法

    River Hopscotch Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9326   Accepted: 4016 D ...

  5. 线上环境 分析java问题 常见命令

    在生产上进程需要分析jvm运行情况,今天分享几个自己常用的命令,持续更新,欢迎补充 1.jps jstack -l {pid} > jstack.log #查看线程快照信息 2.jps jmap ...

  6. Spring的配置文件说明

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. DOM,windows 对象

    DOM:文档对象模型 --树模型文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 windows 对象:浏览器窗口信息document对象:浏览器显示的页面文件 一:window: win ...

  8. 7. react 基础 - React Developer Tools 的安装 及 使用

    1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...

  9. 大数据攻城狮之进阶技能-使用Git上传自己的项目至GitHub仓库

    在开始讲解之前我们默认已经存在仓库和安装Git,没有下载的可以去https://git-scm.com/ Git官方网站下载或者是私聊博主. 下面我们说一说Git的使用,比如说如何生成密钥,连接远程仓 ...

  10. CTF -bugku-web-web基础$_GET和$_POST

    ---恢复内容开始--- GET那题 就算没有学过php也会看懂if条件语句 于是我们在url后面直接加 ?what = flag 这样echo输出flag POST那题 直接火狐 要装hackbar ...