解决Vue打包后element-ui图标字体不显示问题

在开发环境下,我们访问项目一般都是 127.0.0.1:8080,很多资源的查找都是从根目录下开始的,但是如果是打包成静态文件,放到域名的二级、三级目录,有些资源就找不到了。

解决 Vue 打包后 element-ui 图标字体不显示问题

比如说 element-ui 框架在打包后,字体图标就加载不出来,通过查看网络请求发现,他是从 CSS 所在的目录往下找,而不是从项目根目录往下找。

解决方法也很简单,在 build/utils.js 文件里面找到:

if (options.extract) {
 return ExtractTextPlugin.extract({
   use: loaders,
   fallback: 'vue-style-loader'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}
在 fallback 后面添加参数:

publicPath: '../../'
最终得到的代码:

if (options.extract) {
 return ExtractTextPlugin.extract({
   use: loaders,
   fallback: 'vue-style-loader',
   publicPath: '../../'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。