出现问题:后台为了防止XXS攻击加入了CSP内容安全策略设置,导致vue-cli中通过url-loader处理为base64的字体文件和图片文件因为违反规则而图标不出现
解决方法:
(1)后台处理
以IIS为例:
<add name="Content-Security-Policy" value="default-src 'self';" />
在上面的代码中加入允许规则,改为如下
<add name="Content-Security-Policy" value="default-src 'self'; font-src 'self' data:; img-src 'self' data:;" />
(2)一些文章不建议上面的方式处理(因为data:这种格式允许的话并不能有效组织xxs攻击),因此也可以前端处理
前端处理,保留原来的ttf,eot等字体文件图片文件名,只用file-loader进行处理,不使用url-loader,修改build文件夹下面的webpack.base.conf.js文件中
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
改为
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
query: {
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
修改后由于使用file-loader可能有路径问题,因为用base64转码后无路径问题,不转的话css里面引入路径如:“./static/fonts/xxx”,而文件路径如下图,因此需要请修改build里面的util.js文件,publicPath的作用是,将css引入的路径前面加入publicPath,即若一开始css引入url('./static/fonts/iconfont.tff')会改为url('../../static/fonts/iconfont.tff'),改动util.js如下
if (options.extract) {
return ExtractTextPlugin.extract({
use: sourceLoader,
fallback: 'vue-style-loader',
publicPath:'../../',//添加该行,根据你的项目目录进行修改
} else {
return ['vue-style-loader', sourceLoader].join('!')
}