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

简介: 昨天搞了一下vue项目打包之后静态资源走阿里云cdn。配置了半天,终于找到了设置的地方config/index.js 里面设置build 下的 assetsPublicPath 打包的时候便可以添加公共前缀路径asse...

昨天搞了一下vue项目打包之后静态资源走阿里云cdn。

配置了半天,终于找到了设置的地方

config/index.js 里面设置build 下的 assetsPublicPath 打包的时候便可以添加公共前缀路径


assetsSubDirectory: 'admin/static',  // 生成的文件目录
assetsPublicPath: 'https://cdn.xxxxx.com', // 添加路径前缀

这样就可以修改掉打包的静态资源的地址了,没有修改之前打包完为 admin/static
修改之后为 https://cdn.xxxxx.com/admin/s...

上线之后发现字体文件改用cdn会有跨域问题,nginx设置也可以。但是我这里是把字体单独处理了

在loader里面 webpack.base.conf.js


{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
            publicPath: '/admin/static'
    }
}

这样,打包出来的除了字体文件是按照文件路径的,其他的都会是cdn路径

原文地址:https://segmentfault.com/a/1190000017333733

相关文章
|
24天前
|
弹性计算 API 对象存储
怎么给阿里云CDN配置多个源站?
为阿里云CDN配置多源站可显著提升业务高可用性,成本极低且操作简单。本文详解添加主备源站步骤,并推荐在高可用需求、动静分离、系统迁移等场景下使用,保障业务稳定运行。
|
6月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
397 20
|
2月前
|
缓存 监控 安全
提升网站性能的10个CDN配置优化技巧
本文深入解析CDN选型、缓存策略、HTTPS加速、动态内容分发等十大优化方案,涵盖节点覆盖、协议支持、安全防护、边缘计算与多CDN架构设计,助力技术团队提升加载速度40%-60%,降低带宽成本30%-50%,实现持续高性能交付。
386 2
|
12月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
5月前
|
编解码 监控 算法
CDN+OSS边缘加速实践:动态压缩+智能路由降低30%视频流量成本(含带宽峰值监控与告警配置)
本方案通过动态压缩、智能路由及CDN与OSS集成优化,实现视频业务带宽成本下降31%,首帧时间缩短50%,错误率降低53%。结合实测数据分析与架构创新,有效解决冷启动延迟、跨区域传输及设备适配性问题,具备快速投入回收能力。
300 0
|
12月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
12月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
342 5
|
8月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
576 4
|
12月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
182 3