vue-cli webpack配置cdn路径 以及 上线之后的字体文件跨域处理
昨天搞了一下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
vue-cli webpack配置cdn路径 以及 上线之后的字体文件跨域处理的更多相关文章
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- vue+vue-cli2+webpack配置资源cdn
vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn,哪里可以配置呢?下面我详细介绍 1.config/index.js中可以看到 module.exports = { ...
- [Vue CLI 3] 配置解析之 indexPath
在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap
vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...
- [Vue CLI 3] 配置 webpack-bundle-analyzer 插件
首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...
- vue cli 静态资源导入 路径
1.public文件夹 使用绝对路径引入. 2.assets文件夹 使用相对路径引入. https://cli.vuejs.org/zh/guide/html-and-static-assets.ht ...
- [Vue CLI 3] 配置解析之 parallel
官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...
随机推荐
- 8.聚集函数 ---SQL
一.AVG()函数 A VG()通过对表中行数计数并计算其列值之和,求得该列的平均值.A VG()可用来返回所有列的平均值,也可以用来返回特定列或行的平均值. 警告:只用于单个列 AVG()只能用来确 ...
- fstream类总结
- ofstream, ifstream, fstream 在头文件fstream中,在fstream类中,用open成员函数打开文件,实现类与文件的关联操作. - open(filename, mo ...
- Codeforces 1175F(哈希后暴力)
要点 官解使用的哈希,给每个数一个二维键值,这样每个排列就有唯一的键值,再预求一下所给数列的前缀键值,暴力寻找有多少个答案即可. #include <cstdio> #include &l ...
- (转)linux实战考试题:批量创建用户和密码-看看你会么?
老男孩教育第五关实战考试题:批量创建10个用户stu01-stu10,并且设置随机8位密码,要求不能用shell的循环(例如:for,while等),只能用linux命令及管道实现. 方法1:[roo ...
- 《深入理解java虚拟机》笔记(4)对象已死吗
一.垃圾回收器回收的对象 虚拟机内存区域中程序计数器.虚拟机栈.本地方法栈随线程而生,随线程而灭.这3个区域内存分配和回收都具备确定性.因此不需要过多考虑回收问题. 而Java堆和方法区不一样,这部分 ...
- 在Eclipse下搭建Hadoop开发环境
在前面的博文中博主展示了如何在虚拟机中搭建Hadoop的单节点伪分布集群,今天给大家介绍一下如何在Eclipse环境中搭建Hadoop的管理和开发环境,话不多说,下面我们就进入正题吧! 1.JDK安装 ...
- 渣渣菜鸡的 ElasticSearch 源码解析 —— 环境搭建
关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/25/es-code01/ 软件环境 1.Intellij Idea:2018.2版本 2. ...
- c#进行MD5加密方式和解密算法
--------------- 因为加密个解密都需要用到key所有在加密的后需要把key和加密码都存到数据库中 /// <summary> /// 唯一加密方式 /// </summ ...
- hubbledotnet 使用笔记
Hubble vs 字符串 <connectionStrings> <add name="Search" connectionString="serve ...
- Git 忽略規則及 .gitignore 規則不生效的辦法
Git忽略规则: 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如果没有这个文件,则需自己手工建立此文件).这个文件每一行保存了一 ...