作者: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。
知道使用方法后,我们直接修改我们项目的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";