[Vue3] Vite中使用alias配置项从cdn中加载库文件

作者：admin，发布日期：2021-02-26
阅读：6045；评论：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。

知道使用方法后，我们直接修改我们项目的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

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

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

我们可以查看下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";