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 ...
随机推荐
- Luogu P1155 双栈排序 图论?模拟吧。。
今天想做做图论,于是点开了这道题....(是二分图染色然而我没看出来) 四种操作及条件: 1. s1.push() 需满足 待push的元素小于栈顶 && { 若在原序列中,待push ...
- hdu2510-符号三角形(dfs+打表)
n只有24 可以写个暴力搜索,然后打表,不然这个很难通过剪枝直接优化到1s以内. #include<bits/stdc++.h> #define inf 0x3f3f3f3f ; usin ...
- org.apache.ibatis.binding.BindingException【原因汇总】
这个问题整整纠结了我四个多小时,心好累啊...不废话... 背景:Spring整合Mybatis 报错:org.apache.ibatis.binding.BindingException: Inva ...
- 041 First Missing Positive 第一个缺失的正数
给一个未排序的数组,找出第一个缺失的正整数.例如,[1,2,0] 返回 3,[3,4,-1,1] 返回 2.你的算法应该在 O(n) 的时间复杂度内完成并且使用常数量的空间.详见:https://le ...
- 网络编程之异步IO,rabbitMQ笔记
对于网络并发编程而言,多线程与多进程算是最常见的需求场景了.毕竟网站开放就是想要更多的流量访问的. 回顾 回顾下之前学过的关于线程,进程和协程的知识点 IO密集型任务--用多线程更好计算密集型任务-- ...
- C#里边的控件缩写大全(比较规范)
标准控件1 btn Button 2 chk CheckBox 3 ckl CheckedListBox 4 cmb ComboBox 5 dtp DateTimePicker 6 lbl Label ...
- ios中 input 焦点光标不垂直居中
笔记:在ios,如果同时给input设置这种平时我们使字体垂直居中的css写法. 光标会出现,如下图的问题 . 改正方案: 采取不使用line-height的垂直居中方法即可.
- vue or react mvvm里的文字上下滚动
1.jQuery 时候实现 上下滚动很简单,基本上一个animateTop就可以了 2. vue等MVVM就有些麻烦了,因为不推荐操作DOM,专注于数据 我们可以使用 css3 transition: ...
- 阿里云服务器Centos7安装FastDFS(一)
安装步骤一 安装FastDFS需要安装:gcc.libevent.libfastcommon.FastDFS(包括tracker和storage) 安装gcc 判断是否安装了gcc gcc -V 如果 ...
- arcgis jsapi接口入门系列(9):可以同时显示多个的地图popup
jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等 本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠 ...