vuecli4——CDN分发

超级切图仔

已于 2022-04-14 19:08:22 修改

阅读量796

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

于 2022-04-11 17:18:23 首次发布

本文链接：https://blog.youkuaiyun.com/huang_wei_xiong/article/details/124103494

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何在Vue项目中移除预加载和预取插件，仅在分析阶段启用bundle分析，并配置HTMLWebpackPlugin使用CDN加速资源加载。还展示了如何在index.html中添加Vue及Element UI等外部库的链接和脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.config.js配置

注意：vue的js链接一定要在其他的上面

chainWebpack: config => {
        // 移除 preload(预载) 插件
        config.plugins.delete('preload')
        // 移除 prefetch(预取) 插件
        config.plugins.delete('prefetch')
        // npm run analyzer 时才开启
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(BundleAnalyzerPlugin) // 分析项目文件大小的插件
        }
        config
            .plugin('webpack-bundle-analyzer')
            .use(BundleAnalyzerPlugin) // 分析项目文件大小的插件
            
        // 添加 CDN 参数到 htmlWebpackPlugin 配置中
        config.plugin('html').tap(args => {
            args[0].cdn = {
                js: [
                    'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',//*******
                    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.js',
                    'https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js',
                    'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js',
                ],
                css: [
                    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css',
                ],
            }
            return args
        })
        config.externals({
            // 这里的 element-ui 是 import xx from yy 中的 yy 包名。ELEMENT 是文件导出的全局变量名字
            vue: 'Vue',
            'element-ui': 'ELEMENT',
            vuex: "Vuex",
            "vue-router": "VueRouter",
        })
     
    },

index.html文件添加外链文件路径

header标签内加css

   <% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
   <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
   <% } %>

body标签里面加js
注意：一定要加在app的前面

  <% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <div id="app"></div>