vue配置cdn报错

[MarkHo0903]

[Pat1enceLos]

+1

[Minori-ty]

好像是vue-ts的问题，用vue-js就没问题

[Minori-ty]

你用了pinia了吗？我的是用了pinia导致报错的

[LuckyRyan-web]

找不到 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'
                }
            ],
        }),
})

[MaybeQHL]

无解自己用 rollup配置也不行

[LuckyRyan-web]

无解自己用 rollup配置也不行

有可以重现的github仓库地址吗

[MaybeQHL]

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

[MaybeQHL]

@LuckyRyan-web 你下载一下我这个仓库，我里面用的是你这个插件你可以看下。另外建议autoComplete 添加 vuex vue-router vant element-plus ant-design

[LuckyRyan-web]

VITE_OPEN_CDN

我运行了你这个仓库, 去除了 base 等配置, 并且修改 VITE_OPEN_CDN 为 true, 打包后的 dist 文件是可以正常的运行的呀

[MaybeQHL]

VITE_OPEN_CDN

我运行了你这个仓库, 去除了 base 等配置, 并且修改 VITE_OPEN_CDN 为 true, 打包后的 dist 文件是可以正常的运行的呀

去除了 base 等配置 能贴下代码吗？

[MaybeQHL]

你可以尝试登录一下，vue 没问题 但是vuex 和vuer-router有问题

[YanCastle]

我也有这个问题，而且好像没法， 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/vuex@4.0.2/dist/vuex.global.prod.js'
      },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: '//cdn.jsdelivr.net/npm/vue-router@4.0.10/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'
      },
    ]
  })

[MaybeQHL]

楼主有思路吗？ 这个应该是vite(内部模块加载机制) 和 cdn包的不兼容导致。不知道什么时候给出解决方案。

[Chnja]

同样遇到了这个问题，不过我连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"),
      ],
    }),
  ],

[Chnja]

同样遇到了这个问题，不过我连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/element-plus@2.0.2/dist/index.css",
          path: "https://cdn.jsdelivr.net/npm/element-plus@2.0.2/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",
        },
      ],
    }),
  ],

[suboy]

跟AutoImport冲突了，要把AutoImport和Components去掉才能生效

[Chnja]

跟AutoImport冲突了，要把AutoImport和Components去掉才能生效

是啊，不过我原打算是element按需引入的，没想挂CDN

[2897731718]

不打包可以 打包之后 Vue is not found 唉

[Allen-1998]

@LuckyRyan-web 可以看看这个 docs: vite

之所以使用 AutoImport 后就会有问题，是因为 unplugin-auto-import 的 enforce 为 post ,会最后才执行，导致通过 AutoImport 的注入的代码没有被此插件转换

问题定位到，解决方式其实就很简单了，只要让 vite-plugin-cdn-import 在最后执行就可以

然后我查看了此项目的源码，看到是通过合并用户配置项修改了 rollupOptions 来实现的，关于如何修改 rollup plugins 的执行时机vite也有相关的文档，但是我暂时还不清楚在此项目中应该如何进行修改，可以给我一些 指引/规范 吗，我将很乐意为此贡献一个pr

[Allen-1998]

我在我的一个模版仓库的test/cdn1分支中，基于 rollup-plugin-external-globals 和 vite-plugin-html 实现了同样的功能，可以参考一下

[Maxiaochuan123]

@LuckyRyan-web 我也遇到了这个问题，代码就在我的 github仓库 项目名称：Vue3_Vite_Template，我使用了的 githubActions 进行部署

我使用了 unplugin-auto-import/vite 插件

[nonzzz]

可以考虑使用vite-plugin-cdn2. 能解决无法使用unplugin 以及 export * from 'module'的问题

[vivid05]

跟AutoImport冲突了，要把AutoImport和Components去掉才能生效

是啊，不过我原打算是element按需引入的，没想挂CDN

现在有解决吗

[iamziyue]

跟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`
    }
  }
}),

[nonzzz]

vite-plugin-cdn2是基于ast完全的路径重写以及更轻量级的API设定。（ 这个项目一开始是因为公司业务才实现的

[nonzzz]

url

CDN链接可全部由自己配置吗

可以。

[nonzzz]

参考文档

[nonzzz]

就是文档没看明白，不知道如何自定义配置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 转换器

[nonzzz]

@vivid05 你在我那单独开了issue就在那进行回复吧。

[xpc254]

都2024年了，这个问题还没有一个准确的解决方案吗？

[xpc254]

都2024年了，这个问题还没有一个准确的解决方案吗？

发现单独引入vue会报这个错，把VueDemi也引入就不报错了

[ijry]

html

牛比，这个可以解决，遇到这个问题两次了，一次是使用pina，第二次是unplugin。

[ijry]

就是文档没看明白，不知道如何自定义配置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 转换器

为啥自定义地址会报错

[nonzzz]

@ijry 你这个是老版本的配置方式了。新版本的配置已经不是这样了。

[nonzzz]

@ijry 参照 ray-template

[ijry]

怪不得，感谢。