vue配置cdn报错 #13

MarkHo0903 · 2021-12-09T03:51:13Z

Pat1enceLos · 2021-12-13T07:58:23Z

+1

Minori-ty · 2021-12-24T02:31:06Z

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

Minori-ty · 2021-12-24T07:19:33Z

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

LuckyRyan-web · 2021-12-24T09:27:32Z

找不到 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 · 2022-01-09T08:17:03Z

无解自己用 rollup配置也不行

LuckyRyan-web · 2022-01-13T02:13:20Z

无解自己用 rollup配置也不行

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

MaybeQHL · 2022-01-13T03:05:41Z

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 · 2022-01-13T03:06:54Z

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

LuckyRyan-web · 2022-01-19T09:25:26Z

VITE_OPEN_CDN

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

MaybeQHL · 2022-01-19T09:33:49Z

VITE_OPEN_CDN

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

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

MaybeQHL · 2022-01-19T09:35:25Z

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

YanCastle · 2022-01-26T07:45:42Z

我也有这个问题，而且好像没法，
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'
      },
    ]
  })

MaybeQHL · 2022-02-21T07:30:07Z

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

Chnja · 2022-03-04T04:37:55Z

同样遇到了这个问题，不过我连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 · 2022-03-04T06:08:07Z

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

suboy · 2022-03-11T09:09:01Z

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

Chnja · 2022-03-11T09:24:54Z

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

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

2897731718 · 2022-06-28T12:37:14Z

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

Allen-1998 · 2022-08-25T07:44:03Z

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

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

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

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

Allen-1998 · 2022-08-25T08:23:32Z

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

Maxiaochuan123 · 2022-08-26T15:40:50Z

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

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

nonzzz · 2023-07-24T09:12:24Z

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

vivid05 · 2023-07-25T08:25:19Z

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

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

现在有解决吗

iamziyue · 2023-07-25T08:30:00Z

跟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 · 2023-07-25T08:56:27Z

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

nonzzz · 2023-07-25T09:34:21Z

url

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

可以。

nonzzz · 2023-07-25T09:36:55Z

参考文档

nonzzz · 2023-07-25T09:39:59Z

就是文档没看明白，不知道如何自定义配置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 · 2023-07-25T10:04:41Z

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

xpc254 · 2024-04-18T02:38:40Z

%7BDA4438E2-BC4E-46a5-968A-B79224D07382%7D

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

xpc254 · 2024-04-18T03:27:22Z

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

%7BD3AAA714-66B6-41d8-B33C-971D422EC042%7D

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

ijry · 2024-04-19T06:24:05Z

html

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

ijry · 2024-04-19T06:41:43Z

就是文档没看明白，不知道如何自定义配置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 · 2024-04-19T06:43:23Z

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

nonzzz · 2024-04-19T06:45:29Z

@ijry 参照 ray-template

ijry · 2024-04-19T06:46:27Z

怪不得，感谢。

vfasky assigned LuckyRyan-web Dec 24, 2021

LuckyRyan-web closed this as completed Dec 24, 2021

LuckyRyan-web reopened this Dec 24, 2021

Shimada666 mentioned this issue Apr 20, 2022

vue3+vite可以正常打包，但是打开项目后报错 Shimada666/v-code-diff#24

Closed

Shimada666 mentioned this issue Nov 1, 2022

vue使用CDN引入后，使用v-code-diff报错Uncaught (in promise) TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../". Shimada666/v-code-diff#33

Closed

zane0904 mentioned this issue Dec 12, 2022

vite3 vue3 同时使用vite-plugin-cdn-import + unplugin-auto-import #32

Open

Jane0220 mentioned this issue Apr 4, 2023

打包报错 nonzzz/vite-plugin-cdn#5

Closed

vue配置cdn报错 #13

vue配置cdn报错 #13

Comments

MarkHo0903 commented Dec 9, 2021

Pat1enceLos commented Dec 13, 2021

Minori-ty commented Dec 24, 2021

Minori-ty commented Dec 24, 2021

LuckyRyan-web commented Dec 24, 2021

MaybeQHL commented Jan 9, 2022

LuckyRyan-web commented Jan 13, 2022

MaybeQHL commented Jan 13, 2022

MaybeQHL commented Jan 13, 2022 • edited Loading

LuckyRyan-web commented Jan 19, 2022

MaybeQHL commented Jan 19, 2022 • edited Loading

MaybeQHL commented Jan 19, 2022 • edited Loading

YanCastle commented Jan 26, 2022 • edited Loading

MaybeQHL commented Feb 21, 2022 • edited Loading

Chnja commented Mar 4, 2022

Chnja commented Mar 4, 2022

suboy commented Mar 11, 2022

Chnja commented Mar 11, 2022

2897731718 commented Jun 28, 2022

Allen-1998 commented Aug 25, 2022 • edited Loading

Allen-1998 commented Aug 25, 2022

Maxiaochuan123 commented Aug 26, 2022 • edited Loading

nonzzz commented Jul 24, 2023

vivid05 commented Jul 25, 2023

iamziyue commented Jul 25, 2023

nonzzz commented Jul 25, 2023

nonzzz commented Jul 25, 2023

nonzzz commented Jul 25, 2023

nonzzz commented Jul 25, 2023

nonzzz commented Jul 25, 2023

xpc254 commented Apr 18, 2024

xpc254 commented Apr 18, 2024

ijry commented Apr 19, 2024

ijry commented Apr 19, 2024

nonzzz commented Apr 19, 2024

nonzzz commented Apr 19, 2024

ijry commented Apr 19, 2024

MaybeQHL commented Jan 13, 2022 •

edited

Loading

MaybeQHL commented Jan 19, 2022 •

edited

Loading

MaybeQHL commented Jan 19, 2022 •

edited

Loading

YanCastle commented Jan 26, 2022 •

edited

Loading

MaybeQHL commented Feb 21, 2022 •

edited

Loading

Allen-1998 commented Aug 25, 2022 •

edited

Loading

Maxiaochuan123 commented Aug 26, 2022 •

edited

Loading