作者:admin,发布日期:2021-02-26
阅读:5983;评论: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";


你可能感兴趣的文章