vue-cli配置CDN引入（优化）

已于 2023-09-19 15:39:53 修改
阅读量773 收藏
点赞数 1
文章标签： vue.js 前端 javascript vue 前端框架 webpack
于 2023-09-16 23:53:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61397239/article/details/132928168
版权

在vue.config.js中配置

const cdn = {
  css: [
    "//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css",

  ],
  js: [
    
    "//unpkg.com/vue@2.6.11/dist/vue.min.js",
    "//unpkg.com/element-ui/lib/index.js"

  ]
}

module.exports = {
  publicPath: "./", 
  outputDir: "dist",
  lintOnSave: false,
  productionSourceMap: process.env.NODE_ENV !== 'production',
  configureWebpack:{
    externals: { 
      vue: "Vue",
      "element-ui": "ELEMENT",
    }
  },
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      cdn: cdn
    }
  }
}

在index.html中配置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app" class="hs"></div>
    <% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
      <script
        type="text/javascript"
        src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
      ></script>
    <% } %>
  </body>
  
</html>

安然dn
关注
vue打包前优化
Wen_Tao98的博客
03-10 387
打包优化 项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题： module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060,
Vue-CLI 4.0配置CDN的方法
xinyuandu的博客
10-23 1707
Vue-CLI 4.0配置CDN的方法 之前试过了很多搭配cdn的方法，他们说的也都是对的，但是在自己的项目中确实没有办法执行，总是会报错，因此总结了一下我搭配cdn的所有流程，希望有所帮助 创建vue.config.js 创建vue.config.js ，文件的目录层级是雨src文件夹同级别的，因为vue-cli在4.0中取消了关于webpack等插件的配置，但是在本身也集成了这些插件，因此可以通过这样的一个文件去对整体的内容进行配置。 找到CDN的路径 如果要引用cdn，首先还是要找到CDN路径，这个是
在 vue-cli 构建的项目中配置使用资源CDN，加速我们的项目
热爱思考、活力满满、开朗爱笑的年轻人
09-19 1692
出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。生产环境中将项目依赖的一些第三方包替换成通过cdn方式外部加载，而不是打包到vender，对于提升应用的加载、响应速度很有意义。在vue-cli3及以后的项目中，相关配置都需要在这个文件中进行，如果你没有这个文件请自己新建一个（与同级）。
前端性能优化【vue-cli使用CDN引入】
weixin_43950643的博客
08-19 1055
1. index.html引入： 在public文件中的index.html中引入，要注意引入的顺序，vue必须在前面 <body> <div id="app"></div> <script src="//unpkg.zhimg.com/vue@2.6.11/dist/vue.min.js"></script> <script src="//unpkg.zhimg.com/vue-router@3.2.0/dist/vue-rou
vue-cli使用cdn优化
qq_39024012的博客
09-03 997
首先创建vue.config.js 在vue.config.js中配置 先把你要加载的cdn链接写好 // vue.config.js const cdn = { css: [ "//cdn.jsdelivr.net/npm/vant@2.8.6/lib/index.css", "//unpkg.com/nprogress@0.2.0/nprogress.css" ], js: [ "//unpkg.com/vue@2.6.11/dist/vue.min.js",
vue-cli项目打包体积太大，服务器网速也拉胯(100kb/s)，客户打开网站需要等十几秒！！！ 尝试cdn优化方案
最新发布
qq_18816201的博客
09-27 1607
坑1：vue.config.js 的externals配置， 饿了么取名一定要是Element ： 'element-ui': 'Element'比如 echarts、element-ui、element-variables.scss、lay-excel、moment。坑3：明明element-ui的css ，element-variables怎么还那么大。坑2：CDN引入vue一定要在element-ui前面。很好，成功了，但没完全成功，有坑！排查了下 本地引用没有注释干净。插件用法参考之前博客。
关于vue-cli 3配置打包优化要点（推荐）
10-17
Vue-cli 3配置打包优化要点涵盖了对Vue项目构建工具的配置进行优化的一系列方法和技巧。这些方法主要目的是提高项目的性能，降低构建后文件的大小，减少加载时间，提升用户体验。 1. 路由懒加载 Vue项目中路由懒...
Vue-Cli项目优化操作的实现
10-16
在`index.html`中引入相应CDN链接，并在Webpack配置中设置`externals`，告知Webpack这些库已通过全局变量提供，例如`externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios'}`。...
webpack+vue-cli项目中引入外部非模块格式js的方法
12-07
通常，在生产环境中，我们会从CDN引入这些库，而在开发环境中，可能需要手动引入，或者使用某种自动加载机制。 总结，通过直接引用或Webpack的`externals`配置，我们可以顺利地在Webpack+Vue-cli项目中引入非模块...
vue-cli 通过extends引入 CDN外部资源
十二的博客
03-20 2110
使用 vue 的 webpack 模版开发项目时，使用 npm install安装的各种组件和依赖到本地 默认情况下 通过import语法导入的第三方依赖包 最终会被打包合并到同一个文件中 从而导致打包成功后 单文件体积过大的问题 为了解决问题 可以通过webpack的externals节点 配置并加载外部的CDN资源 凡是声明在externals中的第三方依赖包 都不会被打包 未配置前打包的大小...
vue_cli_optimize_cdn:vue-cli 项目优化之：引入 cdn（待补充）
05-15
vue_cli_optimize_cdn 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
半只
03-04 3144
请检查 引入的时候 组件名称是否 是 CDN资源中的别名。那么这个教程不适合！这个只适合Vue版本为。把 需要依赖引入的代码全部去掉了 , 例如。, 一般是在 public 文件夹下。
vue项目的打包上线及优化
pany的博客
11-09 825
本项目是使用vue-cli脚手架完成的，对打包流程以及项目优化整理流程 vue项目的打包 在项目的package.json文件中，有个脚本叫：build，在终端中进行运行命令 npm run build 命令运行完成后，会在根目录下自动生成一文件夹 ：dist 项目托管 项目打包完成后，需要上线，现在创建一个node服务器进行托管打包的项目，模拟服务器进行访问 创建一新文件夹作为根目录创建服务器 将打包好的dist文件夹复制在服务器文件夹中 express创建服务器 n
vue cli4 配置资源CDN
qq_34295211的博客
03-14 6032
出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。脚手架经过升级，cli4的相关配置都需要在vue.config.js这个文件中进行，如果你没有这个文件请自己新建一个（与package.json同级）。 这里我们首先配置configureWebpack的externals字段，把不需...
Vue Vue-CLI3使用CDN
mengxianglong123的博客
11-27 1434
1、html 中引入文件 html中添加script标签如下： <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.simple.min.js"></script> css文件直接用link标签引入 2、在 webpack 中配置使用 CDN 　　在vue....
vue-cli cdn方式引入Vue模块
热门推荐
qq_42881675的博客
10-30 1万+
文章目录选择Vue的cdn从那儿引入？是否需要删除 import Vue 语句？打包测试 选择Vue的cdn 引入的 vue 文件必须是游览器版本，最少需要包含 vue 的运行时源码，也就是 vue.runtime.min.js 这个文件，可以到各大cdn网站上获取。 运行时源码和完整版有什么不同？ 运行时源码少了编译器，而完整版有，这意味着运行时源码还要小一点，详见vue官方文档。 我使用的是 ...
vue-cli项目使用CDN资源
for_weber的博客
10-19 5262
        众所周知web页面使用CDN的优势，常规html文件直接用script标签引入即可。近期的vue+webpack项目也需要用的CDN，客户有自己的插件API，需要CDN引入。         vue+webpack，常规插件都已经安装了依赖包，因此可以通过require的方式按需引入。那么CDN文件也想用require的方式引入的话，就需要用到webpack的external模块...
vue 构建 如何配置 CDN
qq_45747074的博客
09-11 1024
在有些场景并不是直接将 vue 项目进行构建 上传到本地服务器的，而是需要采用 CDN 的方式。通常对于一个普通的项目来说，他的 vue.config.js 中的 publicPath 为以下三种如果需要配置为CDN地址的话也是使用 publicPath 这个属性。
vue-cli4.0 配置CDN加速防范
uu_justdoit的博客
04-27 1497
首先设置vue.config.js const externals = { vue: "Vue", "vue-router": "VueRouter", vuex: "Vuex", axios: "axios" }; const cdn = { // 开发环境 dev: { css: [], js: [] }, // 生产环境 build:...
vue-cli2 cdn
05-31
如果你想使用Vue-cli2的CDN版本，可以在HTML文件中引入以下的CDN链接： ``` <!-- 引入Vue --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <!-- 引入Vue-router --> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script> <!-- 引入Vuex --> <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"></script> <!-- 引入Axios --> <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script> <!-- 引入ElementUI --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 这些CDN链接包含了Vue、Vue-router、Vuex、Axios和ElementUI等常用的前端库和框架。你可以根据自己的需要选择引入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值