一、介紹

上篇文章我們從零配置 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'] // 引入對應的文件時可以忽略其后綴}

重啟，完美解決，熱加載生效，問題解決

至此，Vite 配置 CDN 告以段落

三、相關文章

• Vite 配置 Eslint 規范代碼
• Vite 配置 cdn 加載資源
• Vue 3.0 全家桶 + Vite 從零配置開發環境、生產環境
• Vite 是否可以代替 Webpack ？

總結

以上是生活随笔為你收集整理的Vite 配置 cdn 加载资源的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。