Vue项目中TinyMCE部署到服务器报skins相关ERR_ABORTED 404错误

安全阿岳

2026-10-6

问题根因

本地开发环境会直接读取node_modules目录下的文件资源，所以路径解析不会出错。生产打包时，你使用的长相对路径导入node_modules内资源的写法，会导致打包工具无法正确识别TinyMCE依赖的皮肤、主题、插件等非JS静态资源的输出路径，TinyMCE运行时找不到对应资源就会抛出错误。

修复步骤

第一步：修改导入写法，取消长相对路径，改用简写导入核心依赖，其余静态资源不需要通过import引入：

import Editor from "@tinymce/tinymce-vue";
import "tinymce/tinymce";

第二步：配置打包工具的静态资源拷贝规则，将TinyMCE所需的静态资源直接拷贝到打包后的输出目录。以vue-cli2/vue-cli3项目为例，修改vue.config.js配置：

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, 'node_modules/tinymce/skins'),
          to: 'tinymce/skins'
        },
        {
          from: path.resolve(__dirname, 'node_modules/tinymce/themes'),
          to: 'tinymce/themes'
        },
        {
          from: path.resolve(__dirname, 'node_modules/tinymce/plugins'),
          to: 'tinymce/plugins'
        },
        {
          from: path.resolve(__dirname, 'node_modules/tinymce/icons'),
          to: 'tinymce/icons'
        }
      ])
    ]
  }
}

如果你的项目使用vite构建，安装vite-plugin-static-copy插件后做对应拷贝配置即可。

第三步：在TinyMCE的初始化配置中指定资源加载路径：

editorConfig: {
  // 其他原有配置保留
  base_url: '/tinymce', // 如果项目部署在域名子目录，需要加子目录前缀，如 /admin/tinymce
  skin_url: '/tinymce/skins/ui/oxide',
  content_css: '/tinymce/skins/content/default/content.min.css',
}