开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue-cli webpack配置cdn路径以及上线之后的字体文件跨域处理

Vue-CLI Webpack 配置 CDN 路径：

安装 CDN 插件：在项目根目录下的 config/plugins 目录下，执行 npm install cdn-script-webpack-plugin --save-dev 以安装 CDN 插件。npm install cdn-script-webpack-plugin --save-devmodule.exports = ,, , }]); }, };<script src="https://cdn.example.com/script.js"></script> <script src="https://local.example.com/main.js"></script>
在 Vue.config.js 文件中配置 CDN 插件：
添加脚本文件：在项目的 public 目录下，找到并修改 index.html 文件，在其中添加脚本文件：
上线之后字体文件跨域处理：

如果项目使用了跨域字体文件，则需要使用 CORS 进行跨域访问。

可以使用以下方法进行跨域处理：

自定义 Webpack 配置文件，在 optimization.splitChunks.cacheGroups 模块中使用自定义块进行定义，并使用 files 模块中的 publicPath 配置来指定页面文件的位置，以实现将相应的字体文件放到前端 CDN 服务的根目录上，以便在客户端直接访问。const path = require('path'); module.exports = , common: , }, }, }, output: , };const HtmlWebpackPlugin = require('html-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = ), new BundleAnalyzerPlugin()], };<!doctype html> <html xmlns:th> <head> <meta charset="UTF-8" /> <title>跨域字体处理示例</title> <link th:href="@" rel="stylesheet" /> </head> <body> <html>
自定义插件，使用自定义的 html-webpack-plugin 插件将页面模板中的 CSS 文件进行内联处理，并使用 webpack-bundle-analyzer 插件进行打包分析报告，从而可以更直接地看到哪些字体文件进行了跨域，并可以直接在页面中进行调整。
修改 index.html，将字体文件放到 CDN 服务的根目录上：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

没有搜到相关的沙龙

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭