程序员经验分享-hwhale

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

2023-11-19

昨天搞了一下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路径

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

javascript

运维

ViewUI

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

  • OpenLayers：放大或缩小后，被破坏的特征会重新出现

    我有一个 OpenLayers Bing 地图应用程序 可以显示危险废物站点 用户可以单击链接来切换地图上站点的子站点 当我通过调用层上的 destroyFeatures 来关闭子站点 它们是向量层上的点 时 它们会按预期消失 但是 如果我

  • Iphone 上的 Javascript 日期解析

    我正在开发一个针对移动设备的离线 Javascript 网站 iPhone 就是这样的一种移动设备 我正在尝试从 REST API JSON 对象的成员 解析日期 我在用着 Date parse 2010 03 15 10 30 00 这适

  • contenteditable，在文本末尾设置插入符号（跨浏览器）

    输出在Chrome div style border 1px solid 000 width 500px height 40px hey div what s up div div div div

  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看

  • 在气球内显示带有照片的多个地标的最佳做法是什么？

    我有一个项目如下 从手机上拍摄几张照片 将照片保存在网络系统中 然后将照片显示在其中的谷歌地球上 我读过很多文章 但它们都使用 fetchKml 我读过的一篇好文章是使用 php 但使用 fetchKml 我不知道是否可以使用 parseK

  • Firefox（仅限）动态表单操作不起作用

    控制台为操作属性返回空白 我已经移动了 file upload attr action io cfm action updateitemfile item id agenda modal attr data defaultitemid 周围

  • 定时器内嵌套异步等待 - 不返回所需的值

    我必须使用 Mocha 和 chai 测试来测试端点的响应 下面是相同的代码 async function getData userId let response let interval setInterval async gt resp

  • 使用javascript向url添加哈希而不滚动页面？

    在不滚动页面的情况下向 url 添加哈希 使用 JavaScript 我打开页面 我向下滚动 我单击添加哈希的链接 可能带有值 test 示例 http www example com test http www example com t

  • 有没有等效的 gulp 插件来执行“grunt Bower”？

    With grunt 我可以使用命令grunt bower 由 提供grunt bower requirejs https github com ck86 gulp bower files 自动生成RequireJS我本地的配置文件bowe

  • 如何像在浏览器中一样检索准确的 HTML

    我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面 但对于其中一些页面 检索到的 HTML 不完整 我不太明白为什么 这是我用来废弃此页面的脚本 由于某种原因 每个产品的链接不在 HTML 中 Link http

  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约

  • 启动 onclick 比使用 document.onload 更快

    我有带有链接的 html 页面 我想在其中附加一个功能onclick事件 一种方法当然是 a href save php Save a 但我知道这不是最佳做法 所以我反而等待window onload 循环遍历链接并将保存功能附加到链接re

  • 使用 Google 地图 API 进行反向地理编码

    我正在研究 JavaScript Google Map API 版本 3 更准确地说 正在研究反向地理定位 在 的帮助下官方文档 http code google com intl fr apis maps documentation ge

  • JavaScript：嵌套循环？

    我想实现这样的动画 序列 动画以循环开始 想象一下car从 x1 移动到 x2 然后暂停 1 秒 然后再次播放动画 想象一下car从 x2 移动到 x3 等 the car循环是通过向汽车左侧添加 1px 来实现的 值 但我无法弄清楚嵌套循

  • Sentry 与 @sentry/webpack-plugin 和 heroku

    我正在使用 webpack 来构建我的应用程序 它可以在本地使用 sentry webpack plugin 它自动生成版本并将源映射上传到 Sentry 但是 如果我尝试在 Heroku 上构建相同的应用程序 则会出现以下错误 Error

  • Google 折线图添加对象数组

    我有一个通过解析 JSON 字符串创建的对象数组 var measurementData Html Raw JsonConvert SerializeObject this Model Item1 var stringifiedData J

  • html 下钻下拉所选值未插入 MYSQL

    我有两个下拉列表 首先从数据库下拉填充 根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj

  • 将响应式网格布局转换为 Plotly Dash

    我是一个非常活跃的 Dash 用户 我开始发现 Dash 使用中存在很多限制 并且我意识到有关如何将组件转换为 Dash 的信息 内容绝对有限 并且示例过时且非常简单 并且我对 Javascript 或 React 几乎没有任何了解 我完全

  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同

  • 类型错误：无法读取未定义的属性“长度” - 使用安全帽部署时

    我在尝试在安全帽开发链上部署模拟合约时收到以下错误 我正在关注 使用 JavaScript 学习区块链 Solidity 和全栈 Web3 开发 Patrick Collins 在 FreeCodeCamp YT 频道上的 32 小时课程

随机推荐

  • java错误和异常

    错误 error 非常严重 不处理无法编译 不过很容易处理 一般也就是变量名错误 函数写错了这些 还有就是内存 环境问题了 异常 Exception 编译时异常 必须使用try catch才能运行 比如IOException SQLExce

  • Java--- Java 中的线程，一般执行完成后就会自动销毁

    关于 Java 中的线程 一般执行完成后就会自动销毁 程序会终止 如下测试代码 public class Test implements Runnable public static void main final String args

  • Unity 2D 碰撞检测位置，生成烟雾实例化

    ContactPoint2D contact p collision contacts 0 Quaternion rot Quaternion FromToRotation Vector3 up contact normal Vector3

  • ubuntu安装最新版docker简易教程

    Ubuntu Docker 安装 Docker Engine Community 支持以下的 Ubuntu 版本 Xenial 16 04 LTS Bionic 18 04 LTS Cosmic 18 10 Disco 19 04 其他更新

  • pyecharts源码解读（17）HTML组件包components之表格组件Table

    当前pyecharts的版本为1 9 0 components包概述 components包位于pyecharts包顶级目录中 用于定义pyecharts的HTML组件 包结构如下 components HTML组件包 image py 定

  • python注意事项2

    工具pycharm 1 字符串的方法 hello str hello world 以什么开始 hello str startwith h 以什么结束 hello str endwith 去除空白字符 string lstrip 去除左边的空

  • 【Docker网络】Docker的容器互联

    Docker网络 Docker的容器互联 一 Docker容器互联介绍 1 1 Docker容器互联简介 1 2 Docker容器互联方式 二 本次实践介绍 2 1 本地环境规划 2 2 本次实践介绍 三 默认网络下的容器互联 3 1 默认

  • ABB PFEA111-20 3BSE050090R20处理器模块

    处理能力 PFEA111 20 处理器模块可能具备高性能的处理能力 能够执行复杂的控制算法 逻辑运算和数据处理任务 多通道输入输出 该模块可能会提供多个数字或模拟输入通道 用于监测外部信号 以及多个输出通道 用于控制执行器和设备 通信接口

  • 测试自动化面试题

    Python python有哪些数据类型 Python支持多种数据类型 包括以下常见的数据类型 数字类型 整数 int 浮点数 float 和复数 complex 字符串类型 由字符组成的不可变序列 使用引号 单引号或双引号 括起来 列表

  • 机器学习（三）K-means聚类（手肘法、轮廓系数、可视化代码）

    K means聚类 聚类是无监督学习当中非常重要的一部分 能够在没有标签的情况下将数据分类 说到聚类 最常用也是最重要的一个算法就是K means算法 算法介绍 K means是一种非常简单快速高效的算法 只需要迭代几次即可 其原理用一句话

  • linux---"echo 0 > /proc/sys/kernel/hung_task_timeout_secs" disables this message

    2020年3月14日服务器异常重启 查看 var log message日志 如下 Mar 14 15 04 59 localhost kernel azx single send cmd 11 callbacks suppressed M

  • GLES3.0中文API-glGetProgramResource

    名称 glGetProgramResource 检索程序对象中单个活动资源的多个属性的值 C 规范 void glGetProgramResourceiv GLuint program GLenum programInterface GLu

  • flask模块mock接口（一）

    目录 一 安装第三方模块 二 flask模块的使用 三 动态路由 四 返回json格式数据 有时候测试需要调用第三方接口进行测试 但是第三方接口没有提供时 我们可以通过mock接口模拟第三方接口 一 安装第三方

  • UNITY3D 实现暂停（Coroutine）

    前断时间在做一个游戏项目 为了实现暂停还有游戏逻辑中用yield 自己写了一个类 代码如下 using UnityEngine using System Collections if want gameobject pause Updata

  • 嵌入式基础常识

    一 基本概念 linux ubuntu 用户名 类型 普通用户 系统名称 家目录 root 管理员用户 pwd 显示当前工作路径 绝对路径 home linux 家目录 根目录下 代表根目录 ls 列出文件状态 选项 l i h 1 rwx

  • BUUCTF-千层套路（python脚本）

    zip层层压缩 写脚本爆破 import zipfile import os current path r C Users SoberJoker Downloads attachment if name main pwd ls os lis

  • 【经典】IDEA+DevTools热部署

    IDEA DevTools实现热部署功能 热部署 大家都知道在项目开发过程中 常常会改动页面数据或者修改数据结构 为了显示改动效果 往往需要重启应用查看改变效果 其实就是重新编译生成了新的Class文件 这个文件里记录着和代码等对应的各种信

  • 电脑浏览器换IP怎么换？四种浏览器教程一起看看吧。【芝麻http】

    浏览器设置代理IP上网是代理IP最基础的使用方法 不同的浏览器设置代理IP的方法略有不同 下面就几种常用的浏览器如何设置代理IP进行说明 一 IE浏览器设置代理IP IE浏览器无疑是最常用的浏览器 而像360浏览器 搜狗浏览器 QQ浏览器这

  • C++中的.和-＞

    C 中的 和 gt 1 C 中的点 的应用 如果是一个对象或者引用去调用成员变量或者成员函数函数的话 会使用到点 include

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

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

热门标签