Uncaught TypeError: Cannot read properties of undefined (reading ‘createElementVNode‘)

Uncaught TypeError: Cannot read properties of undefined (reading ‘createElementVNode’)

problem

通过 vite-plugin-cdn-import 配置 cdn
主要包括 vue element

vite配置

import importToCDN from "vite-plugin-cdn-import"
{
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'vue',
                    var: 'vue', 
                    path: 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.cjs.js',
                },{
                    name: 'element-plus',
                    var: 'ElementPlus', 
                    path: 'https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.full.min.js',
                },
            ],
        }),
    ]
}

部署之后页面出现报错:
element-plus index.full.min.js:28:2676
Uncaught TypeError: Cannot read properties of undefined (reading 'createElementVNode')
vue3 vue.cjs.js:3:23
vue.cjs.js:3 Uncaught ReferenceError: exports is not defined
list:1 Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Uncaught TypeError: Cannot read properties of undefined (reading ‘createElementVNode‘)_第1张图片

Uncaught TypeError: Cannot read properties of undefined (reading ‘createElementVNode‘)_第2张图片

reason

配置之间互相有依赖

solution

调整配置如下:
每个包的具体版本,可以在 yarn.lock中找到

// 下面这个配置可行
// 第三方库CDN引入
importToCDN({
    prodUrl: 'https://unpkg.com/{name}@{path}',
    modules: [
        {
            name: 'vue',
            var: 'Vue',
            path: '3.3.4'
        },
        {
            name: 'vue-demi', // vue版本选好 不然会报错
            var: 'VueDemi',
            path: '0.14.6'
        },
        {
            name: 'vue-router',
            var: 'VueRouter',
            path: '4.0.10'
        },
        {
            name: 'element-plus',
            var: 'ElementPlus',
            path: '2.3.12',
            css: '2.3.12/dist/index.css'
        },
        {
            name: '@element-plus/icons-vue',
            var: 'ElementPlusIconsVue', // 根据main.js中定义的来
            path: '2.1.0'
        },
        {
            name: 'pinia',
            var: 'Pinia',
            path: '2.1.6'
        }
    ]
})

你可能感兴趣的:(pits,javascript,前端)