开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

Vue-CLI Webpack 配置 CDN 路径：

安装 CDN 插件：在项目根目录下的 config/plugins 目录下，执行 npm install cdn-script-webpack-plugin --save-dev 以安装 CDN 插件。npm install cdn-script-webpack-plugin --save-devmodule.exports = ,, , }]); }, };<script src="https://cdn.example.com/script.js"></script> <script src="https://local.example.com/main.js"></script>
在 Vue.config.js 文件中配置 CDN 插件：
添加脚本文件：在项目的 public 目录下，找到并修改 index.html 文件，在其中添加脚本文件：
上线之后字体文件跨域处理：

如果项目使用了跨域字体文件，则需要使用 CORS 进行跨域访问。

可以使用以下方法进行跨域处理：

自定义 Webpack 配置文件，在 optimization.splitChunks.cacheGroups 模块中使用自定义块进行定义，并使用 files 模块中的 publicPath 配置来指定页面文件的位置，以实现将相应的字体文件放到前端 CDN 服务的根目录上，以便在客户端直接访问。const path = require('path'); module.exports = , common: , }, }, }, output: , };const HtmlWebpackPlugin = require('html-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = ), new BundleAnalyzerPlugin()], };<!doctype html> <html xmlns:th> <head> <meta charset="UTF-8" /> <title>跨域字体处理示例</title> <link th:href="@" rel="stylesheet" /> </head> <body> <html>
自定义插件，使用自定义的 html-webpack-plugin 插件将页面模板中的 CSS 文件进行内联处理，并使用 webpack-bundle-analyzer 插件进行打包分析报告，从而可以更直接地看到哪些字体文件进行了跨域，并可以直接在页面中进行调整。
修改 index.html，将字体文件放到 CDN 服务的根目录上：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue项目搭建及基本配置

主要完成的是 node、 npm、 webpack和 vue-cli四个工具的环境配置。...├── utils.js //构建相关工具 │ │ ├── vue-loader.conf.js //处理vue文件的配置信息 │ │ ├── webpack.base.conf.js...，并且即使后端不处理跨域问题，也依然正常可用。...原因是 proxy作为中间层，先将数据请求回本地，此过程是中间层node请求后台，不存在跨域。然后请求过来的数据放在本地，前端再去请求这个数据，就可以解决跨域问题了。...-- 四、项目打包本章节介绍打包以及去除打包后资源中的 .map文件。

3.4K3 1

使用Webpack5创建Vue2项目及优化

处理css文件添加依赖 npm i -D style-loader@3.3.1 css-loader@6.7.1 在webpack.config.js这个配置文件设置匹配css文件处理的插件 { test...可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。...此外，这意味着你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。...如果文件大于该阈值，会自动的交给 file-loader 处理。字体不要把字体也用url-loader 来处理，把字体文件转成base64是浏览器无法识别的 { test: /\....to配置的相对路径是相对于发布目录的。如果from所在目录中排除文件后没有文件的时候会报错。

2.8K1 0

工作中总结前端开发流程–vue项目

利用分支，部署不同的上线版本 2.技术选型根据业务需求，选择合适的技术 — vue-cli 制定统一编码规范，便于团队协作和代码维护，例如eslint, tslint 3.环境配置初始化项目完成后，...为保持环境统一，推荐以下方式: 需团队共享的 npm config 配置项使用 npm: >=5.1 版本, 保持 package-lock.json 文件默认开启配置提交 package.json...5.目录结构组件化采用组件化的编程思想，处理 UI 层开发结束后，一般也会经历以下几个过程： 1.需求变更，重新开发 2.code review 3.提交测试，修改bug单，回归测试测试 1.SIT...测试环境测试环境，前后端分离，后台CORS，前台通过代理跨域。...2.UAT测试环境用户验收测试，一般通过后，就准备部署上线。部署 webpack进行打包后，丢到服务器上，项目上线。当然，上线前，要进行性能优化，例如配置缓存，静态资源CDN部署。

2732 0

Vue学习笔记

配置代理解决跨域问题一、环境搭建 1....，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"" }) } } 4. build/vue-loader.conf.js // 处理.vue文件，解析这个文件中的每个语言块...', // 子目录，一般存放css,js,image等文件 assetsPublicPath: '/', // 根目录 proxyTable: {}, // 可利用该属性解决跨域的问题...配置代理解决跨域问题 // 在 config/index.js 中的 proxyTable 配置 proxyTable: { '/':{ target: "http://www.xxx.com...", // 要访问的地址 changeOrigin: true // 开启跨域 } } // 配置理解为将访问 / 代理为 http://www.xxx.com 这样就不会触发跨域问题

1.1K1 0

vue开发微信商城项目总结之四--本地代理处理跨域问题

之前处理跨域问题是通过jsonp，但是只有开发环境是跨域的，代码打包后上传到服务器便不再跨域，所以ajax在本地做了判断，判断是否是跨域，跨域则走jsonp否则其他正常调用可以通过本地配置nginx...做代理来处理跨域，但是作为一个前端来说，学习成本略高，后来发现vue-cli中也有代理，解决开发环境跨域的问题， config>index.js 在dev中找到中找到proxyTable，并对其进行配置...: './', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名 productionSourceMap: false, // 是否开启 cssSourceMap productionGzip...: './',// 编译发布的根目录，可配置为资源服务器域名或 CDN 域名 productionSourceMap: false, // 是否开启 cssSourceMap productionGzip...prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', baseUrl: '"/baseUrl"',//处理跨域

4742 0

Vue CLI 2.x搭建vue,目录最全分析

，是一个用来处理css的文件，这个文件包含了三个工具函数：生成静态资源的路径生成 ExtractTextPlugin对象或loader字符串生成 style-loader的配置...proxyTable: {},//配置API代理，可利用该属性解决跨域的问题 host: 'localhost', // 可以被 process.env.HOST 覆盖 port: 3030...）的文件夹，与assets不同的是：static在打包时会直接复制一个同名文件夹到dist文件夹里（不会经过编译，可使用相对路径） 6、其他文件：（1）.babelrc：浏览器解析的兼容配置，该文件主要是对预设...）、CSS Modules（规定样式作用域）（5）index.html：项目入口页面，编译之后所有代码将插入到这来（6）package.json：npm的配置文件（npm install根据package.json...3、生成打包文件：npm run build 然后你会发现项目多了个dist文件夹（用于部署到生产环境用，是打包压缩之后的src文件夹） ?

1.3K2 0

Vue-Cli优化编译速度

前言 Vue-Cli中内置了Webpack，但是配置文件和Webpack也不尽相同。我们可以通过命令查看对应的Webpack配置。...查看Vue-Cli中的Webpack配置介绍 Vue-Cli脚手架会有webpack的很多默认行为，因此我们得知道基于Vue-Cli的项目，当前的webpack都配置了啥，然后才能做针对性的分析与优化...inject: true, } } } 配置好之后然后运行,进行你上面配置插件动态链接库的编译 npx vue-cli-service dll dll编译完成后会在上面配置的目录下生成dll...Vue-Cli默认已进行了如下配置 noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/ 配置 // 定义getAliasPath方法，把相对路径转换成绝对路径...当然也可以不用CDN，直接把JS复制到项目下，用相对路径引用即可。

3.5K2 0

vue-cli 解决白屏、兼容、压缩及清除console

打包白屏描述 npm run build打包后，生成 dist文件夹。从该文件夹打开 dist/index.html页面，发现页面空白，且控制台报错。原因是路径配置有问题。...方案根目录打开/新建 vue.config.js，配置路径： module.exports = { // 基本路径配置 publicPath: './' } 重新打包验证，问题得以解决。...// 压缩css、js const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 要压缩的文件 const.../ devServer: {//跨域 // port: 8080,// 端口号 // open: true, //配置自动启动浏览器 // proxy:...{// 配置跨域处理可以设置多个 // '/api': { // target: '', // ws: true

4.6K4 0

Vue+tp6 php框架如何快速建立一个前后端分离项目

等框架是如何结合以及部署的。...css加载器以及编译css之后自动添加前缀；　　　　5）webpack.base.conf.js ==> webpack基本配置；　　　　6）webpack.dev.conf.js ==> webpack...不会被webpack构建 6、index.html：首页入口文件，可以添加一些 meta 信息等 7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息三：安装axios...目录下新建一个views目 2、在views目录下新建User.vue 　 3、在router目录下的index.js里面配置路由路径 4、在User.vue中，实现简单的页面 ...api和跨域问题，修改 config/index.js 文件之后我们就可以使用 /api 代替我们的接口地址了, 回到我们的 User.vue 文件,写我们的 axios 在页面中，我们点击

4.4K3 2

万字梳理 Webpack 常用配置和优化方案

项目上线后通常可以配置 publicPath 为一个 cdn 地址，这样就可以引用部署到 cdn 上的静态资源了。...因为热更新针对的是开发环境，chunkhash 以及 contenthash 针对的是生产环境（涉及到 CDN 缓存）。...:8080 的服务器，这时候请求后端接口 http://mysite/api/getData会报跨域错误。...举个例子，这是我们发起的请求： axios.get('/api/getData/') .then(res => console.log(res)) 这是 webpack-dev-server 的跨域配置...经由 file-loader 处理后，最后产出的 bundle 中只包含雪碧图这一张图片。这里需要注意，spritePath 配置的是雪碧图的存放路径。

2.7K5 2

vuecli实现移动端视频类webAPP-项目搭建

前言在平时的前端开发中，我们更多的是完成螺丝钉的角色，即在公司的前端框架下，实现各种业务逻辑，Vue技术栈并不是难点所在，难点往往在于从 0 到 1 搭建一个完整的实践项目，以及项目开发过程中对于很多技术细节的再学习和处理...技术栈 vue vue-cli 4.0.5 router vuex vant 2.10.2 阿里图标字体 axios 基础环境搭建 vue-cli 脚手架初始化首先通过 vue-cli 这个脚手架工具生成项目的初始化化结构...Less编写样式所以需要css 预处理） Pick a linter/formatter config (项目中使用ESLint 代码风格检查，另外我们也希望可以通过额外的配置文件对 eslint做定制化配置...//vue项目入口 App.vue //跟页面 .eslint.js // eslint配置文件 babel.config.js // 解析babel的配置文件...是按照UI设计搞 750* 1334 配置的 (如果是其它尺寸的设计搞则改成对应的即可) 配置 webpack 再项目中间创建 vue.config.js,内容如下 console.log(process.env.NODE_ENV

8044 0

【.NET Core 3.0】框架之十二 || 跨域与 Proxy

四、webpack 的 proxy 代理 1、Vue-Cli 3.0 新增全局配置文件 vue.config.js vue项目搭建的时候，会有一个全局config配置文件，在 vue-cli 2.0 脚手架中...，很明显的把它放到了 config 的一个文件夹中，是这样的，我们在 index.js 中可以端口号的配置，打包之后路径的配置，图片的配置等等但是 vue-cli 3.0 脚手架中，去掉了 config...// eslint-loader 是否在保存的时候检查 lintOnSave: true, // webpack配置 // see https://github.com/vuejs/vue-cli...说句简单的：就是把后端的端口，给代理到了当前的前端端口，实现了跨域，就好像 node 服务，作为要给代理人的身份，来处理。...总结来说呢，就是我们通过 nginx 反向代理服务器处理我们的请求，具体的数据处理还是交给 IIS，然后得到处理过的数据以后，我们再发送给 Internet 请求的客户端，这样就不会存在跨域的问题了。

1.4K2 0

vue 3.0新特性

同时，Vue在3.0版本删除了static目录，并新增了public目录，该目录主要用于存放不被webpack处理的文件和资源。当我们使用create命令创建项目时，系统会要求我们选择一些东西。...文件，可以在此文件中添加自定义的一些配置。...webpack 配置文件，而是一个用于审查的被序列化的格式。...在 JavaScript 或者 SCSS 中通过相对路径引用的资源会经过 webpack 处理，放置在 public 文件夹的资源可以通过绝对路径引用，这些资源将会被复制，而不经过 webpack...并且，图片最好使用相对路径经过 webpack 处理，这样可以避免很多因为修改网站根目录导致的图片404问题。

9293 0

vue.config.js 配置文件

: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md...proxy: 'http://localhost:8080' // 配置跨域处理,只设一个代理 // proxy: { //多个 // // 配置跨域处理可以设置多个...dll // 关于dll只做简单解释未附详细代码 // webpack.dll.conf.js // 1、entry配置需要dll打包的库 // 2、module配置处理对应文件类型的...loader // 3、增加 webpack.DllPlugin插件 // (1)、path:生成mainfest.json文件的绝对路径。...如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。

2.8K0 0

vue开发微信商城项目总结之三--根据不同的开发环境做配置

项目是基于vue-cli搭建，项目分为开发环境，测试环境，预生产环境，生产环境，其中开发环境和测试环境调用同一个接口，开发环境调用服务器端的测试接口会跨域，以上需求就引发了一些问题，问题一：测试环境...问题二：本地开发环境跨域，本地开发环境调用服务器端接口地址，会跨域，但是代码打包上传到服务器，不会跨域之前的解决方案（没有依赖webpack）：开发环境下，在static下新建一个config文件夹...src="/static/config/config.js"> 将config文件夹上传到测试服务器，开发环境打包后，将index.html中的config.js的路径更改为服务器端的...这样配置带来了很多问题和不便，要配置不同的config接口道不同的服务器，打包后需要手动修改config路径，但是也有一个好处，打包一次，三个环境可以共用，因为config接口在服务器端以上是开发过程中...，遇到的问题，后来了解了一下webpack，发现vue-cli中有解决方案，研究一下并做了一下修改，脚手架地址

8493 1

使用 Vue 脚手架，为什么要学 webpack？

所以我们先介绍 webpack 是如何管理项目的，如何把项目中 js、css、html等是如何压缩转换文件？然后学习 vue-cli 2、vue-cli 3 分别如何创建项目，以及项目结构介绍。...2.3、新建项目内容 dist -- distribution（发布）创建 dist 文件夹，用于存储打包之后的文件。.../dist', filename:'bundle.js' } } entry(入口)：配置入口文件 output(输出)：设置打包后文件存放路径(path) 和文件名(filename)。...提示路径需要设置绝对路径。 2.5、打包文件此时需要引入 node 的 path 模块。并修改 path 配置，把路径设置为当前项目根目录下。...webpack 用来处理我们写的 js 代码，webpack会自动处理 js 之间相关依赖。

9292 0

微服务 day02：CMS前端开发

CMS 前端工程的基础构建解决前端跨域请求的问题，并理解前端请求数据的流程。 ...webpack 的配置文件。...debug调试使用了 webpack 之后就不能采用传统js的调试方法在 chrome 中打断点。...vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了 http-proxymiddleware（https://github.com/chimurai/http-proxy-middleware...服务端不存在跨域问题具体的配置如下： 1、修改api方法中url的定义请求前加/api前缀 //public是对axios的工具类封装，定义了http请求方法 import http from

1.7K0 0

vue -- config index.js 配置文件详解

此文章介绍vue-cli脚手架config目录下index.js配置文件此配置文件是用来定义开发环境和生产环境中所需要的参数关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块...，用来处理路径统一的问题 var path = require('path') module.exports = { // 下面是build也就是生产编译环境下的一些配置 build:...// 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被覆盖，至于这里为什么多次一举，可能另有他图吧 var merge = require...('webpack-merge') // 导入prod.env.js配置文件 var prodEnv = require('....NODE_ENV: '"development"' }) (3)下面是proxyTable的一般用法 vue-cli使用这个功能是借助http-proxy-middleware插件，一般解决跨域请求

2K2 0

总结几个 webpack 打包优化的方法，前端项目必备

cacheDirectory', include: [resolve('src')] } ] } 3、优化文件路径 extension 配置之后可以不用在 require 或是...mainFiles 配置后不用加入文件名，会依次尝试添加的文件名进行匹配 alias 通过配置别名可以加快 webpack 查找模块的速度。...，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回， //cacheDir 用于配置缓存存放的目录路径。...} 7、CDN 优化随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。...id，来代表当前的HappyPack是用来处理一类特定的文件 id: 'babel', // 如何处理.js文件，用法和Loader配置中一样 loaders: ['babel-loader

1.8K1 0

vue面试题 vue-cli相关知识点（一）

5、vux等：一个专为vue设计的移动端UI组件库。 6、创建一个emit.js文件，用于vue事件机制的管理。 7、webpack：模块加载和vue-cli工程打包器。...文件夹：用于存放 webpack 相关配置和脚本。...config文件夹下 index.js 的对于工程开发环境和生产环境的配置 build 对象下对于生产环境的配置： - index：配置打包后入口.html文件的名称以及文件夹名称...- assetsRoot：配置打包后生成的文件名称和路径 - assetsPublicPath：配置打包后 .html 引用静态资源的路径，一般要设置成 "./" - productionGzip...：vue设置的代理，用以解决跨域问题请你详细介绍一些 package.json 里面的配置 name: 项目名称 version: 项目版本 description 项目描述 author 作者

1.8K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭