vue项目,如何在vite中配置ant design vue中css的cdn信息

现在想做一个基于vite的项目,涉及到了用cdn去加载一些包。现在的实现方案是

export default defineConfig({
    plugins: [vue()],
    base: './',
    build: {
        sourcemap: true
    },
    resolve: {
        alias: {
            "vue":"https://esm.sh/vue@3.0.5",
            "vuex":"https://esm.sh/vuex@4.0.2",
            "axios":"https://esm.sh/axios@0.21.1",
            "dayjs":"https://esm.sh/dayjs@1.10.5",
            "ant-design-vue":"https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6",
        }
    }
})

这样做的话,虽然js正常加载了,但是css在加载的时候报如下错误

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

目前感觉原因是我在main.js中使用了

import 'ant-design-vue/lib/grid/style/index.css'

这样的语句,但在网上搜索了一番后没有找到类似的处理方案。

现在在考虑是否使用官方文档里的rollupOptions来进行配置,但又没找到比较合适的示例代码。

求有经验的朋友指导,直接贴个类似的代码片段或可以正常使用的项目的git链接都可以

你的意思去掉import 'ant-design-vue/lib/grid/style/index.css' 就不出现报错了吗?你js是cdn那css不因该也是cdn吗?
有可能是这个路径错误 import 'ant-design-vue/lib/grid/style/index.css'


export default defineConfig({
    plugins: [vue()],
    base: './',
    build: {
        sourcemap: true
    },
    resolve: {
        alias: {
            "vue":"https://esm.sh/vue@3.0.5",
            "vuex":"https://esm.sh/vuex@4.0.2",
            "axios":"https://esm.sh/axios@0.21.1",
            "dayjs":"https://esm.sh/dayjs@1.10.5",
            "ant-design-vue":"https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6",
            "antd-vue-style":"https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/lib/grid/style/index.css"
        }
    }
})

然后再main.js里import antd-vue-style 。这样试试

已经解决了,方案是用vite-plugin-cdn-import
具体见我的博客: