vite-plugin-cdn-import
vite-plugin-cdn-import copied to clipboard
MMF-FE
vue配置cdn报错
找不到 vue 版本的原因是 pinia 使用了 vue-demi 进行开发
解决办法是也把 vue-demi 用cdn 引入, 且 vue-demi 需要放在 pinia 前面
export default defineConfig({
plugins: [
vue(),
importToCDN({
modules: [
autoComplete('vue'),
{
name: 'vue-demi',
var: 'VueDemi',
path: "lib/index.iife.min.js",
},
{
name: 'pinia',
var: 'Pinia',
path: 'dist/pinia.iife.min.js'
}
],
}),
})
https://gitee.com/null_639_5368/vue-vant-base/tree/vue3-vite/
// build/cdn.ts
....
# .env.development
VITE_OPEN_CDN=false // 设置为ture , 在开发模式下cdn-js不生效，只有cdn-css生效
# .env.production
VITE_OPEN_CDN=false // 设置为ture
@LuckyRyan-web 你下载一下我这个仓库，我里面用的是你这个插件你可以看下。另外建议autoComplete 添加 vuex vue-router vant element-plus ant-design
VITE_OPEN_CDN
我运行了你这个仓库, 去除了 base 等配置, 并且修改 VITE_OPEN_CDN 为 true, 打包后的 dist 文件是可以正常的运行的呀
VITE_OPEN_CDN
我运行了你这个仓库, 去除了 base 等配置, 并且修改
VITE_OPEN_CDN为 true, 打包后的 dist 文件是可以正常的运行的呀
去除了 base 等配置 能贴下代码吗？
我也有这个问题，而且好像没法， https://github.com/YanCastle/bugreport 麻烦帮忙看看可以怎么处理呢
Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".
importToCDN({
modules: [
autoComplete('vue'),
{
name: 'vue-demi',
var: 'VueDemi',
path: "lib/index.iife.min.js",
},
{ name: 'buffer', var: "Buffer", path: '//npm.tansuyun.cn/buffer.js' },
{
name: 'vuex',
var: 'Vuex',
path: '//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.global.prod.js'
},
{
name: 'vue-router',
var: 'VueRouter',
path: '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.global.prod.js'
},
autoComplete('xlsx'),
autoComplete('lodash'),
autoComplete('moment'),
autoComplete('axios'),
{
name: 'protobufjs',
var: 'protobuf',
path: '//npm.tansuyun.cn/protobufjs/dist/protobuf.min.js'
},
]
})
同样遇到了这个问题，不过我连vue都引入不进来，报错
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
visualizer(),
importToCDN({
modules: [
autoComplete("vue"),
],
}),
],
同样遇到了这个问题，不过我连vue都引入不进来，报错
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), visualizer(), importToCDN({ modules: [ autoComplete("vue"), ], }), ],
我把element-plus, vue-router, axios都引入就正常了🤣
plugins: [
vue(),
// AutoImport({
// resolvers: [ElementPlusResolver()],
// }),
// Components({
// resolvers: [ElementPlusResolver()],
// }),
visualizer(),
importToCDN({
modules: [
autoComplete("vue"),
{
name: "element-plus",
var: "ElementPlus",
css: "https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css",
path: "https://cdn.jsdelivr.net/npm/[email protected]/dist/index.full.min.js",
},
autoComplete("axios"),
{
name: "vue-router",
var: "VueRouter",
path: "https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.global.min.js",
},
],
}),
],
@LuckyRyan-web 可以看看这个 docs: vite
之所以使用 AutoImport 后就会有问题，是因为 unplugin-auto-import 的 enforce 为 post ,会最后才执行，导致通过 AutoImport 的注入的代码没有被此插件转换
问题定位到，解决方式其实就很简单了，只要让 vite-plugin-cdn-import 在最后执行就可以
然后我查看了此项目的源码，看到是通过合并用户配置项修改了 rollupOptions 来实现的，关于如何修改 rollup plugins 的执行时机vite也有相关的文档，但是我暂时还不清楚在此项目中应该如何进行修改，可以给我一些 指引/规范 吗，我将很乐意为此贡献一个pr
@LuckyRyan-web 我也遇到了这个问题，代码就在我的 github仓库 项目名称：Vue3_Vite_Template，我使用了的 githubActions 进行部署
我使用了 unplugin-auto-import/vite 插件
跟AutoImport冲突了，要把AutoImport和Components去掉才能生效
是啊，不过我原打算是element按需引入的，没想挂CDN
现在有解决吗
跟AutoImport冲突了，要把AutoImport和Components去掉才能生效
是啊，不过我原打算是element按需引入的，没想挂CDN
现在有解决吗
刚试了@nonzzz的插件，与 AutoImport 和 Components 都能用
AutoImport({
imports: [
'vue',
'vue-router'
]
}),
Components({
deep: false,
resolvers: [name => name.startsWith('Van') && { name: name.slice(3), from: 'vant' }],
directives: false
}),
cdn({
url: '//cdn.bootcdn.net/ajax/libs',
modules: ['vue', 'vue-router', 'vant'],
resolve: (base, { name, version }) => {
if (name === 'vue' || name === 'vue-router') {
return `${base}/${name}/${version}/${name}.global.prod.min.js`
} else {
return `${base}/${name}/${version}/${name}.min.js`
}
}
}),
就是文档没看明白，不知道如何自定义配置CDN链接，帮忙给个demo呗
cdn({
url: 'https://cdn.bootcdn.net/ajax/libs/',
modules: ['vue', 'vue-router', 'vant'],
resolve: (base, { name, version }) => {
if (name === 'vue' || name === 'vue-router') {
return `${base}/${name}/${version}/${name}.global.prod.min.js`
} else {
return `${base}/${name}/${version}/${name}.min.js`
}
}
})
url代表你需要自定义的地址。 resolve是一个全局的url 转换器
