webpack通过externals加载外部的CDN资源 vue-router吐血踩坑！！

最新推荐文章于 2024-07-05 17:12:56 发布
最新推荐文章于 2024-07-05 17:12:56 发布
阅读量899 收藏 1
点赞数 1
分类专栏： vue技巧 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42302145/article/details/116955035
版权

webpack的 externals配置如下

index.html 配置

运行发现

经过两天的查阅资料，网上各种方法都试了，一点都没有解决，一点办法都没有

 

无赖，我打开vue-router3.2.0 CDN源码慢慢对比发现了问题的所在！！！！

https://cdn.staticfile.org/vue-router/3.2.0/vue-router.esm.browser.min.js

解决方法

换成下面这个cdn  就可以了！！！！！！！！！！！

https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js

 

 

希望可以帮助大家避免这些坑，搞死我了！！！

 

小熊海啸
关注
专栏目录
vue项目webpack使用cdn
大湿胸的博客
07-15 2121
1.在index.html中引入vue和vue-router <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> 2.在build文件夹中的webpack.base.conf.js添加 externals: .
webpack配置cdn资源
lyn1772671980的博客
12-17 3043
1.主要配置如下： const assetsCDN = { // webpack build externals externals: { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios' }, css: [], // https://unpkg.com/browse/vue@2.6.10/ js: [ '//cdn.jsdelivr.net/npm/vu
webpack打包后引用cdn的js_webpack系列-externals配置使用（CDN方式引入JS）
weixin_35779845的博客
01-17 702
如果需要引用一个库，但是又不想让webpack打包(减少打包的时间)，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用(一般都以import方式引用使用)，那就可以通过配置externals。这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。方式一...
webpack 的externals配置
最新发布
AM1n98的博客
07-05 638
webpack 中的 externals 配置提供了的方式。如果需要引用一个库或文件，但是又不让它被webpack打包（减少打包的时间+减少打包后的bundle文件体积），且不影响在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals来实现。
项目打包优化上线，externals引入vue-router报错 Cannot redefine property: $router
Y_soybean_milk的博客
06-10 1421
项目打包优化阶段，为了解决打包成功后，单文件体积过大的问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。 一、具体的配置代码 vue.config.js文件中的配置 module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { .
vue3.0 webpack采用externals进行cdn优化
weixin_46605745的博客
02-23 1193
第一步 在vue.config.js文件内的configureWebpack方法内写入externals configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: {
webpack中使用vue-router
weixin_40499698的博客
11-18 411
文章目录一、webpack中使用vue-router二、示例1.新建路由2.创建vue页面3.在Index.vue中引入 一、webpack中使用vue-router 1.新建路由 2.新建vue页面 二、示例 1.新建路由 默认路由文件是src/router/index.js 1.先引入vue页面，@是当前文件路径，src 2.创建路由 import SayHi_test from '@/components/SayHi_test' export default new Router({ routes
Vue-CLI 4.0配置CDN的方法
xinyuandu的博客
10-23 1683
Vue-CLI 4.0配置CDN的方法 之前试过了很多搭配cdn的方法，他们说的也都是对的，但是在自己的项目中确实没有办法执行，总是会报错，因此总结了一下我搭配cdn的所有流程，希望有所帮助 创建vue.config.js 创建vue.config.js ，文件的目录层级是雨src文件夹同级别的，因为vue-cli在4.0中取消了关于webpack等插件的配置，但是在本身也集成了这些插件，因此可以通过这样的一个文件去对整体的内容进行配置。 找到CDN的路径 如果要引用cdn，首先还是要找到CDN路径，这个是
vue-cli4.0 配置CDN加速
mrhaoxiaojun的博客
09-10 1816
vue.config.js 出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。 以下是vue-cli4的相关配置vue.config.js cdn.config.js module.exports = assetsCDN = { useCDN: false, // webpack build externals externals: { vue: 'Vue', 'vue-router
从Vue-cli看 webpack配置
etemal_bright的博客
04-08 616
用了哪些loader？ vue-loader: 把vue转成js sass-loader: 把sass转成css css-loader: 把css转成js style-loader: 把css注入到js里，通过dom操作 stylus-loader：加载并编译stylus文件 file-loader: 把文件输出到文件夹中使用相对路径引用 url-loader: 与file-loader类似，唯一不同的是可以添加阈值，超过limit阈值生成带有hash后缀的文件，不超过阈值的转化成base64 ima..
优化项目通过引入webpack的externals加载外部cdn资源
web_gutianle的博客
06-12 840
为什么通过引入webpack的externals加载外部cdn资源？ 因为通常引入资源是根据important语法导入第三方依赖包最终会打包到同一个文件中，从而导致单文件打包文件体积过大 因此有了以下方案 最后可以把main.js中把引入的第三方依赖包去掉 ...
webpack——在模块化环境中使用vue-router
weixin_44054088的博客
05-06 729
1、下载 npm i vue-router 2、引用资源 <script src="./node_modules/vue-router/dist/vue-router.js"></script> 3、配置externals externals:{ 'vue-router':'VueRouter' } 4、在router.js文件中加载使用 import Vue...
20. webpack优化配置-externals 不打包某些库使用CDN代替
草木红的博客
08-19 595
当我们希望使用CDN来引入jquery时，就不需要在打包时将jQuery打包。 配置webpack配置文件webpack.config.js，添加externals配置 const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {
vue项目优化——Webpack的externals的理解
qq_42931285的博客
05-15 3317
externals、vue项目优化
Vue项目通过externals加载外部CDN资源
火星基地
02-23 610
在项目配置文件vue.config.js中的发布模式添加如下： config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) 然后，在index.html文件的
webpack externals 深入理解
小米人的博客
09-18 404
文章链接 文章链接 文章链接
cdn 引入的资源需要通过 externals 排除打包哦~
开心学前端 : )
06-05 726
cdn 指的是通过相互连接的网络系统，使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。在 webpack 中，我们可能会将引入的第三方资源会编译成单独的文件，作为静态资源放到服务器上，但有些库它本身就有 cdn 链接，通过 cdn 直接加载会使各地资源获取速度更快。在 文件中写一段简单代码，通过 发送 get 请求 在 中定义 属性，将公共资源单独编译 执行 后，被编译到 559.js 文件中。再将编译后的 html 文件在浏览器中打开，获取到了 get 请求的响应数据在这种
2.通过externals加载外部CDN资源
weixin_55959870的博客
03-07 963
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。 为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在 externals中的第三方依赖包，都不会被打包。 项目中 顺便做下判断是开发还是发布判断的页面显示 const { defineConfig } = require('@vue/cli-service') module.exports = defineC...
Vue 打包优化之 externals 抽离公共的第三方库
天问博客-专注于大前端技术
11-29 3464
使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。
module.exports = { // externals: { // echarts: 'echarts', // }, assetsDir: '', baseUrl: './', //重要设置！可以让资源路径以“相对路径”放置，类似http://258754.cn/2019/bfhb/index.html为首页访问时，保证资源路径正确。 configureWebpack: config => { const myConfig = {} myConfig.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'lodash': '_', 'echarts': 'echarts', 'element-ui': 'ELEMENT' } echarts前段运行正常，打包后出现 echarts is not defined
05-12
根据你提供的代码，你设置了webpack的externals属性，将vue、vue-router、axios、lodash、echarts和element-ui作为外部依赖，并在打包时不将它们打包进入bundle中。 但是，你在打包后访问页面时遇到了"echarts is not defined"错误。这是因为你在页面中使用了echarts，但是在webpack中将它设置为了外部依赖，导致页面中无法找到echarts的定义。 解决这个问题的方法是在页面中引入echarts的CDN链接或者在webpack中将echarts从外部依赖中移除，让webpack将它打包进bundle中。例如，在configureWebpack中加入如下代码： ``` config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'lodash': '_', 'element-ui': 'ELEMENT', 'echarts': 'echarts' // 将echarts从外部依赖中移除 } ``` 或者在页面中引入echarts的CDN链接： ``` <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值