vue编译后用cdn加速

在Vue项目中使用CDN加载资源可以显著加快应用的加载速度，因为这样做可以减少打包文件的大小，同时利用CDN的缓存和并行加载优势。以下是在Vue项目中使用CDN资源的一些关键步骤：

选择CDN资源:
首先，需要选择合适的CDN资源。对于Vue项目，常见的CDN资源包括Vue本身、Vue Router、Vuex等。确保选择的CDN版本与项目中使用的版本兼容.
修改index.html:
在项目的public/index.html文件中，通过<script>标签引入CDN资源。这些标签应该放在文件的<head>部分。例如，引入Vue和Vue Router的CDN链接：
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.min.js"></script>
```
设置crossorigin属性为anonymous可以避免跨域的警告.
配置Webpack:
在Vue CLI项目中，需要在vue.config.js文件中配置Webpack，以排除从CDN加载的库。这样做可以防止这些库被打包到最终的构建文件中。可以通过修改externals属性来实现：
```
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter'
    }
  }
}
```
这里的键是包名，值是全局变量名。这告诉Webpack在全局范围内寻找这些变量，而不是将它们打包.
在开发环境中保持正常引用:
为了在开发环境中保持热重载和其他功能，可以在开发环境中不使用CDN，只在生产环境中使用。这可以通过条件判断来实现，例如，在vue.config.js中根据环境变量来设置externals.

使用CDN资源可以显著提高应用的加载速度，特别是在生产环境中。但是，也需要注意管理CDN资源的版本，确保它们与项目依赖的版本兼容，以及处理好开发和生产环境的差异.

其他cdn方式

项目打包后，将资源自动上传到cdn平台从而实现cdn加速。

机房动力环境监控大屏就是使用的vue3 vite js 框架通过打包将资源上传到七牛平台实现加速，而机房环境数据大屏则是vue2 webpack js框架打包后将资源自动上传到七牛平台从而实现资源cdn加速。