昨天搞了一下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路径 以及 上线之后的字体文件跨域处理的更多相关文章

  1. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  2. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  3. vue+vue-cli2+webpack配置资源cdn

    vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn,哪里可以配置呢?下面我详细介绍 1.config/index.js中可以看到 module.exports = { ...

  4. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  5. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  6. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  7. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  8. vue cli 静态资源导入 路径

    1.public文件夹 使用绝对路径引入. 2.assets文件夹 使用相对路径引入. https://cli.vuejs.org/zh/guide/html-and-static-assets.ht ...

  9. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

随机推荐

  1. Opencv级联分类器实现人脸识别

    在本章中,我们将学习如何使用OpenCV使用系统相机捕获帧.org.opencv.videoio包的VideoCapture类包含使用相机捕获视频的类和方法.让我们一步一步学习如何捕捉帧 - 第1步: ...

  2. ES6新特性使用小结(四)

    十一.Proxy .Reflect ①.Proxy 的概念和常用方法 { let obj = { //1.定义原始数据对象 对用户不可见 time: '2017-09-20', name: 'net' ...

  3. 转 v$session_longops视图

    转http://www.dbdream.com.cn/2013/10/14/vsession_longops%E8%A7%86%E5%9B%BE/ 1.有的时候不准确 ,我看到 session wai ...

  4. RL_RTX函数

    1 延时:os_itv_set(usFrequency) //设置延时周期,配合os_itv_wait使用:os_itv_wait() 是绝对延迟是包含调用前的时间, os_dly_wait() 是相 ...

  5. JSON.stringify 语法讲解

    作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个 ...

  6. CI框架自带的验证工具及汉化

    本人自己还是很喜欢CI框架自带的验证工具的,使用方式如下: /** *@blog<http://www.phpddt.com> */ public function do_login() ...

  7. 完整uploadify批量上传文件插件使用

    1.首先准备uploadify的js文件,网上一搜一大堆 2.上传页面UpFilePage.aspx 关键代码: <html xmlns="http://www.w3.org/1999 ...

  8. feign hystrix加仪表盘

    Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数 ...

  9. Android 适配底部返回键等虚拟键盘的完美解决方案

    这个问题来来回回困扰了我很久,一直没能妥善解决. 场景1:华为手机遮挡了屏幕底部. 场景2:进入应用时,虚拟键自动缩回,留下空白区域. 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占 ...

  10. u-boot剖析(一)----Makefile分析

    由于u-boot比较庞大,所以我们分开来分析,对于一个大型的项目我们想快速的了解其代码架构和内容,最方便的方法就是分析Makefile,所以我们今天以三星的s3c2440来分析Makefile.我们今 ...