现在想做一个基于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 。这样试试