vue项目打包部署elementUI的字体图标丢失问题
自己搭建的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的字体图标丢失问题的更多相关文章
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue项目 打包部署上线
1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...
- Vue项目打包部署到apache服务器
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
- vue项目打包部署到服务器,静态资源文件404
js文件404问题 原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...
- vue项目打包部署到nginx 服务器上
假如要实现的效果如下 http://ip/vue =>是进入首页访问的路径是 usr/local/nginx/html/vue http://ip/website =>是进 ...
- vue-cli创建的项目打包成app引入字体图标的问题
将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https
- Vue+elementUI build打包部署后字体图标丢失问题
错误描述:Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
随机推荐
- css代码实现列表等宽
实现上面的手机页面,我们会遇到一个自适应的问题,但是手机页面的屏幕大小不一致,自适应的问题不是百分比可以好好解决的,我采用下面的布局:display:flex; <!DOCTYPE html&g ...
- 建立更可靠的OOP程序-类和成员的访问控制
1. public 成员(公共成员) (1)使用this 关键字的类的成员允许在任何地方被访问. (2)使用 prototype 定义的属性和方法都是公共成员. 这些属性和方法可以在外面任何地方被访问 ...
- C++ 操作数据库类
#pragma once #include <string> #include <windows.h> #include <algorithm> #include ...
- Navicat for Mysql 11.2 的下载,安装与激活
1. Navicat for Mysql 11.2 的下载 链接:https://pan.baidu.com/s/1w54F-MYTLuy4TQwpzUE7bQ 密码:zsfu 2.下载的 ...
- python里类的概念
Python编程中类的概念可以比作是某种类型集合的描述,如"人类"可以被看作一个类,然后用人类这个类定义出每个具体的人--你.我.他等作为其对象.类还拥有属性和功能,属性即类本身的 ...
- M内核迎来大BOSS,ARM发布Cortex-M55配NPU Ethos-U55 ,带来无与伦比的性能提升
说明: 全球顶级嵌入式会展Embedded Word2020这个月底就开了,各路厂家都将拿出看家本领. 先回顾下去年的消息: 1.去年年初的时候ARM发布Armv8.1-M架构,增加了Arm Heli ...
- GFlags 处理内存越界、野指针问题研究
从官方文档可以看到,从gflags的GUI上,我们是无法判断他打开的是full page heap verification 还是Standard page heap verification, 所以 ...
- Mysql插入数据里有中文字符出现Incorrect string value的错误
问题:Mysql插入数据里有中文字符出现Incorrect string value的错误 描述:CMD里直接敲代码插入数据 提示的部分截取为:ERROR 1366 (HY000): Inco ...
- HTML5 SVG应用(1)——loading效果
先看一下效果: 链接 代码: <svg version="1.1" id="loader-1" xmlns="http://www.w3.org ...
- 根据pdf文件获取标题等信息
根据 kdd2019的 pdf文件, 生成索引文档. 代码如下: for fname in ` ls pdfs/*.pdf`; do title=$(mdls -name kMDItemTitle - ...