一、介绍
上篇文章我们从零配置 Vite + Vue3.0 开发环境、生产环境，本篇文章我们配置 CDN 加载。因为 Vite 不会重写从外部文件导入的内容，我们需要使用支持 ESM 编译的 CDN。这里我们使用 https://esm.sh/ 来引入相关的第三方库。
二、配置
与 NPM 同步，直接引入对应的包即可，这里我们引入 [email protected]
import {
defineConfig } from 'vite'
export default defineConfig({
resolve: {
// 项目别名
alias: {
'@': resolve(__dirname, '../src'),
'pages': resolve(__dirname, '../src/pages'),
'vue': "https://esm.sh/[email protected]"
},
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/[email protected]?dev",
},
extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀
}
重启，完美解决，热加载生效，问题解决
至此，Vite 配置 CDN 告以段落