首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

Vue-CLI Webpack 配置 CDN 路径:

  1. 安装 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>
  2. 在 Vue.config.js 文件中配置 CDN 插件:
  3. 添加脚本文件:在项目的 public 目录下,找到并修改 index.html 文件,在其中添加脚本文件:
  4. 上线之后字体文件跨域处理:

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

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

  1. 自定义 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>
  2. 自定义插件,使用自定义的 html-webpack-plugin 插件将页面模板中的 CSS 文件进行内联处理,并使用 webpack-bundle-analyzer 插件进行打包分析报告,从而可以更直接地看到哪些字体文件进行了跨域,并可以直接在页面中进行调整。
  3. 修改 index.html,将字体文件放到 CDN 服务的根目录上:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券