一、介绍
上篇文章我们从零配置 Vite + Vue3.0
开发环境、生产环境,本篇文章我们配置 CDN
加载。因为 Vite
不会重写从外部文件导入的内容,我们需要使用支持 ESM
编译的 CDN
。这里我们使用 https://esm.sh/ 来引入相关的第三方库。
![在这里插入图片描述](https://img-blog.csdnimg.cn/4fdf53f41833416383a94f805a0cbd6e.png?t_70)
二、配置
与 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
,运行正常
![在这里插入图片描述](https://img-blog.csdnimg.cn/66c233ca76e74dc4a0680e001c7d70b9.png?t_70)
但是我修改热加载的内容,发现热加载失效,控制台报错:__VUE_HMR_RUNTIME__ is not defined
![在这里插入图片描述](https://img-blog.csdnimg.cn/f4b84aa04e19467b90dee68b56b3409c.png?t_70=550px)
查阅文档,这里是因为我们引入生产环境的包,缺少热加载相关的代码,这里我们换成开发环境的包,文档里面明确说明:需要在后面拼接?dev
![在这里插入图片描述](https://img-blog.csdnimg.cn/46126b9df2154dc7bfc57622ef20bc3a.png?t_70=540px)
resolve: {
// 项目别名
alias: {
'@': resolve(__dirname, '../src'),
'pages': resolve(__dirname, '../src/pages'),
'vue': "https://esm.sh/vue@3.2.37?dev",
},
extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀
}
重启,完美解决,热加载生效,问题解决
![在这里插入图片描述](https://img-blog.csdnimg.cn/f2945d2c5e8b4c6d8a8f4852d32fb456.png)
至此,Vite
配置 CDN
告以段落
三、相关文章