Vite 配置 cdn 加载资源

原创已于 2022-07-26 18:02:10 修改 · 6.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vite #CDN

于 2022-07-20 09:49:56 首次发布

前端技能同时被 2 个专栏收录

13 篇文章

订阅专栏

Vite

4 篇文章

订阅专栏

本文档介绍了如何在Vite中配置CDN加载第三方库，如Vue3.2.37，以及遇到的热更新失效问题。通过在CDN引入的Vue包后添加'?dev'参数，成功解决了热加载失效的问题，确保了开发过程中热更新的正常工作。

一、介绍

上篇文章我们从零配置 Vite + Vue3.0 开发环境、生产环境，本篇文章我们配置 CDN 加载。因为 Vite 不会重写从外部文件导入的内容，我们需要使用支持 ESM 编译的 CDN。这里我们使用 https://esm.sh/ 来引入相关的第三方库。
在这里插入图片描述

二、配置

与 NPM 同步，直接引入对应的包即可，这里我们引入 vue@3.2.37

	import { defineConfig } from 'vite'
	export default defineConfig({
		  resolve: {
		    // 项目别名
		    alias: {
		      '@': resolve(__dirname, '../src'),
		      'pages': resolve(__dirname, '../src/pages'),
		      'vue': "https://esm.sh/vue@3.2.37"
		    },
		    extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀
		  },
	})

导入测试，重启项目：npm run dev，运行正常

在这里插入图片描述

但是我修改热加载的内容，发现热加载失效，控制台报错：__VUE_HMR_RUNTIME__ is not defined

在这里插入图片描述

查阅文档，这里是因为我们引入生产环境的包，缺少热加载相关的代码，这里我们换成开发环境的包，文档里面明确说明：需要在后面拼接?dev

在这里插入图片描述

 resolve: {
    // 项目别名
    alias: {
      '@': resolve(__dirname, '../src'),
      'pages': resolve(__dirname, '../src/pages'),
      'vue': "https://esm.sh/vue@3.2.37?dev",
    },
    extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀
  }