vue2 项目中使用CDN

最新推荐文章于 2024-10-24 16:31:48 发布

杜燚

最新推荐文章于 2024-10-24 16:31:48 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/qq_45389934/article/details/129217763

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目的webpack配置文件vue.config.js中设置externals属性，以排除特定包在生产环境中被打包，转而在public.html中通过unpkgCDN来引入这些依赖，例如axios、dayjs和vue等，以优化构建速度。

摘要由CSDN通过智能技术生成

1.在webpack的配置文件中添加configureWebpack属性是一个对象，在这个对象中添加externals属性（也是一个对象），在这个对象中添加打包是要排除的包:

 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    host: '127.0.0.1',
    port: 80
  },
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  configureWebpack: {
    externals: process.env.NODE_ENV === 'production'
      ? {
          axios: 'axios',
          dayjs: 'dayjs',
          echarts: 'echarts',
          'element-ui': 'ELEMENT',
          vue: 'Vue',
          'vue-quill-editor': 'VueQuillEditor',
          'vue-router': 'VueRouter',
          vuex: 'Vuex',
          'vuex-persistedstate': 'createPersistedState'
        }
      : {}
  }

})

2.在再public.html 引入对应的包

包可以再https://unpkg.com/网站中查找

** 使用： unpkg.com/:package@:version/:file 如找 vue@2.6.14 在浏览器中数 unpkg.com/vue@2.6.14 后回车再复制浏览器中的网址**

public.html 
<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <% if(process.env.NODE_ENV === 'production') { %>
  <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.core.css">
  <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css">
  <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.bubble.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
  <% } %>
</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"></div>
  <!-- built files will be auto injected -->
  <% if(process.env.NODE_ENV === 'production') { %>
  <script src="https://unpkg.com/axios@1.3.3/dist/axios.min.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.7/dayjs.min.js"></script>
  <script src="https://unpkg.com/echarts@5.4.1/dist/echarts.js"></script>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
  <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
  <script src="https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js"></script>
  <% } %>
</body>
</html>