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 '#' 这个错误我是在打包 ...
随机推荐
- 如何做好Essay Proofreading?
终于写完了一篇Essay,瞬间感觉人生轻松了好多!别急,想要Essay最终得到高分,你还需要最后一步:论文润色! 换句话说,就是我们需要写完的Essay进行检查校对.那么我们一般需要校对的部分有哪些呢 ...
- 10 Json(unity3D)
//写入json文档注意事项: 1.在Asset下要有一个StreamingAssets文件夹 2.在文件夹内,有一个已创建好的json空文档 3.引入命名空间 using Litjson; usin ...
- Flink:动态表上的连续查询
用SQL分析数据流 越来越多的公司在采用流处理技术,并将现有的批处理应用程序迁移到流处理或者为新的应用设计流处理方案.其中许多应用程序专注于分析流数据.分析的数据流来源广泛,如数据库交易,点击,传感器 ...
- UML-持久框架-目标&关键思想
1.目标 1).使用模板方法.状态模式.命令模式来设计部分框架 2).介绍对象-关系(O-R)映射中的一些问题 3).使用虚代理实现的滞后具体化 2.关键思想 1).映射(Mapping) 类--表 ...
- SQL字符替换函数translater, replace
translate() 函数原型是:translate(string, from, to) SELECT TRANSLATE('12345', '134', 'ax') 得到:a2x5 这个函数会把f ...
- 每天一点点之vue框架开发 - vue坑-This relative module was not found
94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...
- Mac Github:第一次上传成功,解决图片不可显示,Initial commit Untracked files
在上传之前需要先给自己的电脑安装SSH 上传成功用的是github的官方提示,直接复制去做就可以了 解决README.md中图片不可显示:图片路径到底要怎么写? https://blog.csdn.n ...
- 第一个eclipse maven项目!我超全!
前言:以前一直用idea做东西,今天突然想试一下,没想到配置起来是真的麻烦!!!!会出现各种各样的问题,太晚了,本文只做出几处非常严重的问题,如有疑问,请私信,留言 准备:本文 JDK 1.8 ...
- php对象:__autoload()函数及单入口文件,__set(), __get(), get_class_methods(),get_class_vars()
__autoload():当类中找不到相关类的时候,会自动执行__autoload()函数,可以自动加载相关文件 __set() : 当对类的私有变量进行调用赋值时,自动调用该方法. __get() ...
- JavaScript学习总结(八)
这一节结束,我们的JavaScript学习总结系列文章第一阶段就要结束了,今后会适当的补充一些高级的内容,敬请期待. 好了,废话不说进入这一节的学习. 联动框 联动框,实在是太常见了.比如淘宝,我们选 ...