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

迷南。 2022-04-08 11:21 15阅读 0赞

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

配置了半天，终于找到了设置的地方,[web开发的跨域问题详解][web]

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

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

这样就可以修改掉打包的静态资源的地址了，没有修改之前打包完为 admin/static  
修改之后为 [https://cdn.xxxxx.com/admin/s...][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][https_segmentfault.com_a_1190000017333733]

[web]: http://www.jqhtml.com/23310.html
[https_cdn.xxxxx.com_admin_s...]: https://cdn.xxxxx.com/admin/static
[https_segmentfault.com_a_1190000017333733]: https://segmentfault.com/a/1190000017333733

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关【部署上线，跨域】

法一：宝塔Linux部署下载Nginx ![cde1822cfad34b18a64f25679201aee1.jpeg_pic_center][] 将前端项目和后

布满荆棘的人生/ 2024年03月22日 10:37/ 0 赞/ 94 阅读

相关 uniapp配置好跨域之后，还是有跨域问题解决方法

uniapp配置好跨域之后，还是有跨域问题解决方法（Access to XMLHttpRequest at ‘http://localhost:8080/login‘ fro

叁歲伎倆/ 2024年03月16日 07:21/ 0 赞/ 88 阅读

相关上线路径不能写死，相对路径用代理，以及json-server的跨域问题

上线路径不能写死，相对路径用代理将路径写死`let url='http://localhost:3333/jobslist';//这个是模拟数据的地址`能拿到数据，但是

布满荆棘的人生/ 2023年07月14日 15:56/ 0 赞/ 3 阅读

相关 vuecli4中配置请求代理解决跨域

元气满满，直接干！开发项目时，给的测试接口需要跨域，这就非常难受！在vuecli中，可以通过配置请求代理，解决接口跨域问题。配置过程很简单。 1. 在根目录下添加 \

绝地灬酷狼/ 2022年09月02日 00:44/ 0 赞/ 308 阅读

相关 webpack：多文件、多环境、跨域处理、热加载

文章目录 webpack：多文件、多环境、跨域处理、热加载多页面处理 webpack多环境 vuecli多环

爱被打了一巴掌/ 2022年08月31日 15:27/ 0 赞/ 34 阅读

相关 Webpack解决跨域问题

代码： 1.在webpack配置文件中配置： "devServer": { // contentBase："./" // 本地服务器在哪个目

电玩女神/ 2022年05月30日 05:23/ 0 赞/ 197 阅读

相关 Webpack处理跨域问题

项目预计所有功能都实现啦，[GitHub地址][GitHub]如果有什么功能问题，提出来哈。 > 建议先注册，如果觉得注册麻烦就直接登录哈，登录名：微笑（hhh,我也不知道为

今天药忘吃喽~/ 2022年05月21日 04:29/ 0 赞/ 245 阅读

相关 nignx跨域配置处理

在nginx.conf中配置 server { location / { index

末蓝、/ 2022年04月18日 04:17/ 0 赞/ 196 阅读

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

昨天搞了一下vue项目打包之后静态资源走阿里云cdn。配置了半天，终于找到了设置的地方,[web开发的跨域问题详解][web] config/index.js 里面设置b

迷南。/ 2022年04月08日 11:21/ 0 赞/ 16 阅读

相关 Vuecli3+express实现跨域

目录一，本地跨域二，线上跨域 -------------------- 一，本地跨域首先，本地服务器地址开放的是3000端口，云服务器上开发的是4

阳光穿透心脏的1/2处/ 2021年07月25日 17:22/ 0 赞/ 688 阅读