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 服务的根目录上：
相关·内容
如何在编译前将cdn路径变量添加到styles.scss中？我有一个webpack 4配置，工作良好的JS。JS/CSS文件从所需的cdn url中正确加载。我想要实现的是，在本地主机上运行的项目将对图像/图标/字体使用与生产上相同的web不同的cdn url。我的webpack<
浏览 0提问于2019-03-07得票数 1
回答已采纳
1回答
有没有人知道在部署时将内容推送到CDN的策略？
我面临的关键问题是，我们有一个可以在各种上下文中使用的站点:本地开发、开发服务器、试运行，然后最终上线。站点的肝脏版本需要从域加载资产，该域将指向CDN: assets.domain.com。但是，我们将有大量指向相关文件夹的资源引用，例如css中的/images/，可能在js中，以及HTML &
浏览 0提问于2010-05-07得票数 3
回答已采纳
我使用的是带有以下配置的workbox-webpack-plugin。true, runtimeCaching: [ urlPattern: new RegExp('cdn.test.com但问题是加载sw.js文件。我有一个直接指向域()的自定义路径()。在构建之后，sw.js尝试加载的
浏览 1提问于2018-03-29得票数 0
2回答
我试着进口当地的包裹，那已经捆绑在webpack了。当我建立一个应用程序，一切看起来都很好，除了webpack没有复制图片，字体等从内部包。有什么问题吗？当我试图引用我的自定义库时，已经绑定了：-- asdfjlsjdflasdjflsdaf.ttf-- mylibrary.js问题可以解决：
通过增加加载程序的限制和转换为base64并包含在mylibrary.js中的所有内容，我
浏览 5提问于2017-12-08得票数 1
family=Poppins:i,100,200,300);
与在@font-face文件中使用.scss的请求相比，获取下载到本地的字体，然后由我自己提供：只有第二个文件名遵循在name配置中定义的file-loader：
exp
浏览 0提问于2019-06-17得票数 1
我计划使用子域的Magento媒体dir作为一个cdn.->存储媒体存储配置:文件系统，环境更新时间: 3600
在前端，我可以从cdn.example.com/media/看到旧的产品映像，但是新上传/更新的产品映像是不可见的，并且不会被提取到CDN子域</
浏览 4提问于2013-04-27得票数 0
3回答
我正在使用Vue Cli和webpack创建一个应用程序，其中NodeJS/Express用于背面，VueJS用于正面。import Vue from 'vue'
import App from '.
浏览 0提问于2016-12-07得票数 8
我正在尝试使用一个很棒的字体图标在一个小工具，是安装在一个客户网站上。可怕的字体图标在Safari和Chrome中可以正确显示，但在Firefox中不能。然而，当在我们的网站上预览它时，它仍然可以在Firefox中正确显示。这与Firefox如何跨域显示第三方字体有关吗？注意:这是使用火狐V9或更高版本进行测试的。
浏览 0提问于2012-05-17得票数 12
我有一个webpack库，它包含一个webworker (通过‘魔术’工作者处理程序导入)，并且我试图从另一个项目运行这个库(在这个例子中是一个角项目)。我已经正确地将工人(和工人块)文件复制到我的角度项目的输出中，因为如果我在托管的相同域中运行我的角项目，webworker将正确地运行。/worker/worker.ts', import.meta.url));
我已经用处理跨域故障转移的</e
浏览 11提问于2021-12-08得票数 1
回答已采纳
我使用npm和gulpfile.js从本质上将npm包导出到“wwwroot”下的“lib”文件夹；这是一种享受，每当我更新特定的npm包时，如果它在我的gulpfile.js监视列表中，它就会将内容推送到这将创建以下目录：
&l
浏览 11提问于2020-11-10得票数 1
回答已采纳
2回答
我有一个CDN指向我的基本域，基本上有1:1的映射。我试图在服务器上构建我的包，我想使用CDN加载它。/css/app.cssmix .js('resources/js/i
浏览 4提问于2020-04-28得票数 6
2回答
我一直在努力使用Webpack 2获得语义-ui设置。我在默认的语义-ui主题中出现了一些与字体有关的错误，以及有关image-webpack-loader的另一个错误。最终目标是使用自定义主题来使用semantic组件，我可以简单地将其导入到.jsx文件中，如中所示。我一直在考虑可能<em
浏览 0提问于2017-02-18得票数 4
回答已采纳
我使用output.path和output.filename来指定Webpack应该在哪里输出结果，但是我不确定在output.publicPath中放入什么内容以及是否需要它。
浏览 121提问于2015-03-04得票数 285
实际上，您可以导航到任何“非文件”路径，比如/a/b/c-d，而Vue仍然会找到它。它似乎没有选择的唯一路径是以.*结尾的路径，以及以.结尾的路径。例如/a.js，/b.使用该sails生成器，生成了一个常见的webpack Vue项目，并对一些配置文件进行了修改，以便将webpack的<
浏览 2提问于2017-06-22得票数 0
2回答
所以我几乎完成了我的第一个(同构的) ReactJS，当我们部署它时，完成build.js的速度有点慢。一种建议是使用CDN来分离资产获取(cdn0，cdn1，cdn2.)我在想在我的网站上该怎么做。在本地，我的结构是- config/ - webpack-production.confi
浏览 5提问于2016-05-18得票数 5
我正试着制作一个简单的酒瓶应用程序，在前面使用Vue和Vuetify。当我查阅有关如何将酒瓶嫁给Vue的教程时(就像这个)，它依赖于webpack，我可以让它正常工作。当我试图根据他们的的说明向项目添加Vuetify时，我发现它要求您必须遵循Existing Applications指南，因为该项目不是使用vue-cli3初始化的(参见bug report )。在阅读了webpack的文章后，我决定对于我的具体申请，我可以不使用它。$
浏览 0提问于2019-05-22得票数 2
回答已采纳
14回答
但是当我试图添加一些图标时，图标字体没有正确显示。我试着看了看这里的，只有‘.象形文字-信封’被正确显示。其他人则表现得像'E001‘等等。
我怎样才能解决这个问题呢？
浏览 14提问于2013-08-15得票数 56
回答已采纳
3回答
我正在开发一个NUXTJ来创建服务器端呈现的网站。我的问题是，尽管nuxt项目结构中有一个资产/静态文件夹来服务图像&静态文件，但我希望为我的所有图像源设置cdn链接。做这件事的最佳方法是什么？我能想到的可能方法：
提亚
浏览 0提问于2018-10-28得票数 1
我们遇到了由CDN (内容分发网络)提供的SVG文件的跨域问题，因此这些文件来自与我们的主域不同的域名，即Python/Django应用程序。我们想要设置一个特殊的视图，它可以作为这些SVG文件的服务器端代理，以屏蔽域名并绕过跨域问题。问题是如何对静态文件(如SVG或其他类型的<em
浏览 2提问于2012-11-08得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
