如何将Vue3的.ce.vue单文件组件编译为.js文件

核心方案：@vue/compiler-sfc + esbuild轻量编译 #

无需Webpack或复杂配置，用Node.js内置模块配合两个轻量工具实现单命令编译，直接解决Vite库模式的模块解析报错问题。

1. 安装依赖 #

在项目根目录执行以下命令安装必要工具：

npm install -D @vue/compiler-sfc esbuild vue

2. 直接运行单命令编译 #

针对你的MyTest.ce.vue自定义元素组件，复制以下命令到终端执行：

node -e "
const { compileScript, compileTemplate, parse } = require('@vue/compiler-sfc');
const fs = require('fs');
const { build } = require('esbuild');

// 可自行修改输入/输出文件路径
const inputFile = './MyTest.ce.vue';
const outputFile = './MyTest.ce.js';

const source = fs.readFileSync(inputFile, 'utf8');
const { descriptor } = parse(source);

// 编译SFC脚本（开启自定义元素模式）
const scriptCompile = compileScript({
  descriptor,
  options: { customElement: true }
});

// 编译SFC模板
const templateCompile = compileTemplate({
  source: descriptor.template.content,
  filename: inputFile,
  options: { customElement: true }
});

// 拼接代码并注册自定义元素
const buildCode = `
import { defineCustomElement } from 'vue';
${scriptCompile.content}
${templateCompile.code}
const CustomElement = defineCustomElement(${scriptCompile.exports.default});
customElements.define('my-test', CustomElement);
`;

// 用esbuild打包为浏览器可直接加载的IIFE格式，内置Vue依赖
build({
  stdin: { contents: buildCode, resolveDir: process.cwd() },
  bundle: true,
  format: 'iife',
  outfile: outputFile,
  minify: true // 可选：开启代码压缩
}).catch(err => {
  console.error(err);
  process.exit(1);
});
"

3. 效果与适配说明 #

• 编译后的MyTest.ce.js是独立的IIFE格式文件，无需模块支持，直接通过Yii2视图的<script src="/path/to/MyTest.ce.js"></script>引入即可。
• 浏览器会自动注册<my-test>自定义元素，可直接在HTML中使用该标签。
• 如果是普通.vue组件（非自定义元素），只需移除customElement: true选项，将最后注册代码改为Vue组件挂载逻辑即可。

4. 简化操作（可选） #

把上述代码保存为项目根目录的vue-compile.js，然后在package.json中添加脚本：

{
  "scripts": {
    "compile:ce": "node vue-compile.js"
  }
}

之后只需执行npm run compile:ce即可完成编译，可根据需求修改脚本里的输入/输出文件路径。

关于Vite库模式报错的原因 #

你之前遇到的Failed to resolve module specifier "vue"错误，是因为Vite默认将代码打包为ES模块，而浏览器原生ES模块需要正确的资源路径配置，且script标签需添加type="module"。本方案打包为IIFE格式，完全避开模块解析问题，更适配PHP后端项目的静态资源加载逻辑。

内容的提问来源于stack exchange，提问作者e-frank