请问可以替换掉node_modules里的externals吗

[Ezra-Chan]

CDN引的vue.js文件，另外还用了VueUse，这个库里其中一个依赖VueDemi，用到了Vue，打包出来导致报错。
TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
尝试过vite-plugin-externals这个插件，但是出现了另一个报错：
"shallowRef" is not exported by "../node_modules/vue-demi/lib/index.mjs"

[fengxinming]

@Ezra-Chan 有没有最小化demo，另外列一下你用的vite版本和vue版本，我发布了一个新版本，你配置一个新属性mode设置为false看能不能解决。

[Ezra-Chan]

@Ezra-Chan 有没有最小化demo，另外列一下你用的vite版本和vue版本，我发布了一个新版本，你配置一个新属性mode设置为false看能不能解决。

mode设为false未生效，我尝试搞了一个demo出来
https://github.com/Ezra-Chan/cdn-vue-demo
安装依赖后，执行build命令，打包完后在pluginTemp文件夹下有一个index.html，用Live Server打开该html，即可在控制台看到报错：
TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
如您有时间，帮忙看下，谢谢🙏
"vite": "^5.0.8"
"vue": "3.3.9"

[fengxinming]

@Ezra-Chan 我试了一下，稍微改动了一下，demo在build之后可以正常运行。
vite.config.js

  build: {
    target: "es2015",
    rollupOptions: {
-     external: Object.keys(externalGlobalsObj),
      output: {
        entryFileNames: "assets/app.[hash].js",
        assetFileNames: "media/[name]-[hash].[ext]",
      },
    },
  }

执行npm run build之后执行npm run preview后打开http://localhost:4173/出现下面的错误

GET http://localhost:4173/source/vue/vue.prod.js net::ERR_ABORTED 404 (Not Found)

配置一个copy插件把pluginTemp/source复制到dist/source，如下

import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
import vitePluginExternal from "vite-plugin-external";
+import cp from 'vite-plugin-cp';

// 全局对象
const externalGlobalsObj = {
  vue: "Vue",
  "element-plus": "ElementPlus",
  // vuex: "Vuex",
};

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    extensions: [".js", ".json", ".ts", ".vue"],
  },
  plugins: [
    vue(),
    cssInjectedByJsPlugin(), // 将css打进js
    vitePluginExternal({
      externals: externalGlobalsObj,
      mode: false,
    }),
+    cp({
+      targets: [
+        {
+          src: "pluginTemp/source",
+          dest: "dist/source",
+          flatten: false
+        },
+      ],
+    })
  ],
  build: {
    target: "es2015",
    rollupOptions: {
-     external: Object.keys(externalGlobalsObj),
      output: {
        entryFileNames: "assets/app.[hash].js",
        assetFileNames: "media/[name]-[hash].[ext]",
      },
    },
  },
});

再次执行npm run build之后执行npm run preview后打开http://localhost:4173/

[Ezra-Chan]

@fengxinming 去掉rollupOptions的external配置后确实可以了，非常感谢您提供的这个插件以及解答🙇
另外source文件夹我是自己写了脚本给复制到dist下，build命令里执行了该脚本，preview因为不用这个命令就没加，不过也是不知道有这个cp插件，感谢推荐