1. Introduction
In the previous article, we configured Vite + Vue3.0the development environment and production environment from scratch. In this article, we configure CDNloading. Because Vitecontent imported from external files is not overwritten, we need to use support ESMfor compilation CDN. Here we use https://esm.sh/ to introduce related third-party libraries.
2. Configuration
To NPMsynchronize with , just introduce the corresponding package directly. Here we introduce[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'] // 引入对应的文件时可以忽略其后缀
},
})
Import the test, restart the project: npm run dev, run normally
But when I modified the content of hot reloading, I found that hot reloading failed and the console reported an error:__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'] // 引入对应的文件时可以忽略其后缀
}
Restart, perfect solution, hot reloading takes effect, problem solved
At this point, Vitethe configuration CDNcomes to an end