element ui 图片上传_nuxt打包element-ui上传阿里云oss(CDN)上字体出现跨域问题

今天打包将项目放到linux服务器上，打包项目，将打包文件放到阿里云oss(CDN),访问界面时，出现element字体跨域问题。截图如下：

苦逼一下午，终于解决了这个问题。

1.先要理解vue和nuxt的assets文件夹和static文件夹的区别，asset是会被webpack打包，

你只有将字体文件放到static就会当成静态文件直接访问，不会处理。所以我将element-ui的所以样式都放到了static文件中，如下图：

这些字体你可以在node_modules文件中element-ui/lib/theme-chalk查找

2.你需要将element-ui/lib/theme-chalk的样式全部放到assets文件中

3.在nuxt.config.js加入如下代码 /*

** Global CSS

*/

css: [

'~assets/css/theme-chalk/index.css',

],

在pluns文件中的修改element-ui.js

修改如下

import Vue from 'vue'

Vue.use(require('element-ui'))

在打包如下：

没有font文件夹了，然后上阿里云OSS（cdn）就不会报字体跨域问题了。

还有一个最重要的是字体样式问题，是字体的路劲。如果修改了，相对路径为 /fonts/.... 重点是多个/ 才能映射到static文件夹