作者:admin,发布日期:2021-02-26
阅读:1149;评论:4

写在开头

上一篇,另外种实现方式,可以参考:https://blog.craftyun.cn/post/228.html

最近几天偶尔在翻看vite的仓库,今天在查看issues时,发现也有人遇到了和我差不多的问题:

https://github.com/vitejs/vite/issues/2204

下面是我之前在ant-design-vue那边提交的issue:

https://github.com/vueComponent/ant-design-vue/issues/3670

我们都提到了使用cdn引入,同时使用alias,出现错误。

解决方案

在开头的issue中,尤大对问题进行了解释,看到这个解释我才知道为什么会出现这种问题:

The ESM build of vue-router at https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.4/vue-router.esm-browser.js contains non-rewritten import * from 'vue'. Vite doesn't rewrite imports from external files.


You need to use a ESM-compiled CDN like https://www.skypack.dev/ or https://www.jsdelivr.com/esm.

简单来说,就是Vite不会重写从外部文件导入的内容,我们需要使用支持ESM编译的CDN。

按照这个提示,尝试了一下,发现问题已经解决

操作方法

这里我们用到了https://esm.sh/这个网站,jsdelivr的esm编译最高只支持50M文件的编译,无法编译antdv。

Snipaste_2021-02-26_14-37-24.jpg

知道使用方法后,我们直接修改我们项目的alias,添加上去即可

    alias:{
      "vue":"https://esm.sh/vue@3.0.6",
      "ant-design-vue":"https://esm.sh/ant-design-vue@next",
    }

具体的vite.config.js内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      "vue":"https://esm.sh/vue@3.0.6",
      "ant-design-vue":"https://esm.sh/ant-design-vue@next",
    }
  }
})

这里需要注意的是,当前版本alias配置项已经被移动到resolve下面。

接着在main.js中导入测试

import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'

createApp(App).use(Antd).mount('#app')

运行开发环境

yarn dev

打开网址,可以发现我们的程序已经正常加载

Snipaste_2021-02-26_14-39-48.jpg

可以发现,项目已经可以成功加载

我们可以查看下cdn编译后的文件,可以发现其单独生成了一个文件,用于export最终的js

/* esm.sh - ant-design-vue@2.0.0 */
export * from "https://esm.x-static.io/v15/ant-design-vue@2.0.0/esnext/ant-design-vue.js";
export { default } from "https://esm.x-static.io/v15/ant-design-vue@2.0.0/esnext/ant-design-vue.js";


你可能感兴趣的文章

评论区

已有4位网友发表了看法:

1L 访客  2021-06-18 03:55:25 回复
样式导入如何解决,貌似这个cdn里买有样式文件
1L 访客  2021-07-13 10:21:43 回复
@访客 同楼上,如何解决css引入的问题,这里的css文件进不来,很迷。看看其他的cdn网站有没有合适的
2L 访客  2021-08-30 18:28:40 回复
是不是dev环境就是无法使用vue采用cdn模式引入?
2L admin  2021-08-30 19:13:45 回复
@访客 好像是可以用的,但是由于vite使用的是esm,只能用esm的

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。