vue脚手架如何引入cdn

在Vue脚手架项目中引入CDN可以有效地减少项目的打包体积，提高加载速度。在Vue脚手架引入CDN的步骤主要包括以下几点：1、在Vue配置文件中配置externals，2、在public/index.html中引入CDN链接，3、合理使用vue.config.js文件进行配置。 下面将详细介绍如何具体操作这三点。

一、配置externals

在Vue CLI项目中，我们可以通过修改vue.config.js文件来配置externals。externals是webpack的一个配置项，用于防止将某些import的包打包到bundle中，而是在运行时再去外部获取这些扩展依赖。

在项目根目录下创建或编辑vue.config.js文件：

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT'
    }
  }
}

解释：
- 'vue': 'Vue'表示在代码中使用import Vue from 'vue'时，实际上不会把Vue打包进最终的文件，而是在运行时从全局变量Vue中获取。
- 同理，其他库如vue-router，vuex，axios，element-ui也是如此处理。

二、在public/index.html中引入CDN链接

在项目的public/index.html文件中，引入这些库的CDN链接。将CDN链接添加到<head>或<body>标签中。

编辑public/index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue CLI App</title>
  <!-- 引入Vue的CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
  <!-- 引入Vue Router的CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  <!-- 引入Vuex的CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
  <!-- 引入Axios的CDN -->
  <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
  <!-- 引入Element UI的CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js"></script>
</head>
<body>
  <noscript>
    <strong>We're sorry but this project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
</body>
</html>

解释：
- 将CDN链接放在<head>标签中，可以确保在解析和执行JavaScript代码之前加载这些外部库。
- 同时引入CSS文件，以便正确渲染UI组件样式。

三、合理使用vue.config.js文件进行配置

vue.config.js文件是Vue CLI项目的配置文件，可以用来修改webpack配置、设置开发服务器、配置多页面应用等。合理使用vue.config.js文件进行配置，可以进一步优化项目。

添加其他配置项：

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT'
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].cdn = {
        css: [
          'https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css'
        ],
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',
          'https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',
          'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
          'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
          'https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js'
        ]
      }
      return args
    })
  }
}

解释：
- chainWebpack用于链式操作webpack配置，config.plugin('html').tap(args => { ... })可以修改html-webpack-plugin的配置项。
- 通过设置args[0].cdn，可以将CDN链接动态插入到生成的HTML文件中，避免手动修改public/index.html。

四、实例说明

为了更好地理解上述配置，我们可以结合一个实际项目进行说明。

创建一个新的Vue CLI项目：

vue create my-project

在项目根目录下创建或编辑vue.config.js文件，按照上述内容进行配置。
在public/index.html文件中，引入CDN链接。
测试项目：
- 运行npm run serve，启动开发服务器。
- 打开浏览器访问http://localhost:8080，查看项目是否正常运行。

通过上述步骤，我们已经成功在Vue CLI项目中引入了CDN，并且优化了项目的打包体积和加载速度。

五、总结与建议

通过在Vue CLI项目中引入CDN，我们可以有效地减少项目的打包体积，提高加载速度。为了确保项目的稳定性和性能，建议在项目中合理选择CDN服务商，并定期更新CDN链接。 另外，在实际项目中，还可以结合其他优化手段，如代码分割、懒加载等，进一步提升项目性能。希望本文对您在Vue CLI项目中引入CDN有所帮助。