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

相关文章
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
887 20
|
8月前
|
弹性计算 API 对象存储
怎么给阿里云CDN配置多个源站?
为阿里云CDN配置多源站可显著提升业务高可用性,成本极低且操作简单。本文详解添加主备源站步骤,并推荐在高可用需求、动静分离、系统迁移等场景下使用,保障业务稳定运行。
|
9月前
|
缓存 监控 安全
提升网站性能的10个CDN配置优化技巧
本文深入解析CDN选型、缓存策略、HTTPS加速、动态内容分发等十大优化方案,涵盖节点覆盖、协议支持、安全防护、边缘计算与多CDN架构设计,助力技术团队提升加载速度40%-60%,降低带宽成本30%-50%,实现持续高性能交付。
822 2
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
12月前
|
编解码 监控 算法
CDN+OSS边缘加速实践:动态压缩+智能路由降低30%视频流量成本(含带宽峰值监控与告警配置)
本方案通过动态压缩、智能路由及CDN与OSS集成优化,实现视频业务带宽成本下降31%,首帧时间缩短50%,错误率降低53%。结合实测数据分析与架构创新,有效解决冷启动延迟、跨区域传输及设备适配性问题,具备快速投入回收能力。
832 0
|
缓存 监控 负载均衡
在使用CDN时,如何配置缓存规则以优化性能
在使用CDN时,如何配置缓存规则以优化性能
|
JSON 前端开发 JavaScript
webpack如何支持多种类型的文件和转换需求
【10月更文挑战第13天】webpack如何支持多种类型的文件和转换需求
|
运维 Serverless 应用服务中间件
Serverless 应用引擎产品使用合集之CDN如何配置IP限制
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
|
前端开发 JavaScript 安全
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
3693 0