Vue.js 2 集成 TinyMCE 从node_modules导入失败求助

问题概述 #

在Vue.js 2.6.14项目中基于TinyMCE 7.1.1开发RichTextBox组件时，直接从node_modules导入TinyMCE依赖资源失败，报错信息为Unexpected token '<' model.js。目前仅能通过手动复制node_modules/tinymce下的icons、models、plugins、skins、themes目录到项目public目录下实现正常使用。尝试在vue.config.js中配置TinyMCE路径别名，但未生效。

现有配置代码 #

vue.config.js 配置（未生效） #

configureWebpack: {
  resolve: {
    alias: {
      'tinymce': path.resolve(__dirname, 'node_modules/tinymce')
    }
  }
}

RichTextBox 组件代码 #

<template>
  <div>
    <textarea id="editor"></textarea>
  </div>
</template>

<script>
import tinymce from 'tinymce';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/link';
import 'tinymce/plugins/table';

export default {
  name: 'RichTextBox',
  mounted() {
    tinymce.init({
      selector: '#editor',
      plugins: ' link table',
      skin_url: '/tinymce/skins/ui/oxide',
      content_css: '/tinymce/skins/content/default',
      base_url: '/tinymce',
      promotion: false,
      paste_as_text: true,
      toolbar:
          'selectall table cut copy paste' +
          '| undo redo' +
          '| formatselect bold italic underline strikethrough sub sup ' +
          '| alignleft aligncenter alignright | alignjustify' +
          '| bullist numlist outdent indent ' +
          '| link unlink',
      table_toolbar:
          'tableprops tabledelete ' +
          '| tableinsertrowbefore tableinsertrowafter tabledeleterow ' +
          '| tableinsertcolbefore tableinsertcolafter tabledeletecol',
      entity_encoding: 'numeric',
      menubar: ''
    });
  },
  beforeDestroy() {
    const editor = tinymce.get('editor');
    if (editor) {
      editor.remove();
    }
  }
};
</script>

<style scoped>
</style>

package.json 版本信息 #

{
  "tinymce": "^7.1.1",
  "vue": "^2.6.14"
}

解决方案 #

错误原因分析 #

报错Unexpected token '<' model.js本质是TinyMCE请求资源时拿到了HTML文件（通常是项目的index.html）而非目标JS文件，原因包括：

1. base_url配置错误，导致资源请求路径指向路由而非静态资源
2. Webpack未正确解析TinyMCE的部分JS文件（如models目录下的文件）
3. 路径别名配置未覆盖Webpack的资源解析规则

具体修复步骤 #

1. 修正 vue.config.js 配置
   新增Webpack模块解析规则，并添加自动复制静态资源的插件，避免手动复制目录：

   const path = require('path');
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   
   module.exports = {
     configureWebpack: {
       resolve: {
         alias: {
           'tinymce': path.resolve(__dirname, 'node_modules/tinymce')
         }
       },
       module: {
         rules: [
           // 确保TinyMCE的JS文件被正确解析
           {
             test: /\.js$/,
             include: path.resolve(__dirname, 'node_modules/tinymce'),
             use: ['babel-loader']
           }
         ]
       }
     },
     chainWebpack: config => {
       // 自动复制TinyMCE静态资源到public目录
       config.plugin('copy-tinymce').use(CopyWebpackPlugin, [
         {
           patterns: [
             { from: 'node_modules/tinymce/skins', to: 'tinymce/skins' },
             { from: 'node_modules/tinymce/icons', to: 'tinymce/icons' },
             { from: 'node_modules/tinymce/models', to: 'tinymce/models' },
             { from: 'node_modules/tinymce/plugins', to: 'tinymce/plugins' },
             { from: 'node_modules/tinymce/themes', to: 'tinymce/themes' }
           ]
         }
       ]);
     }
   };
   

   注意：需先安装适配Vue2的copy-webpack-plugin版本：

   npm install copy-webpack-plugin@6.4.1 --save-dev
   

2. 修正组件初始化配置
   确认base_url指向正确的静态资源路径，确保TinyMCE能找到依赖：

   tinymce.init({
     // ...其他配置
     base_url: '/tinymce', // 对应copy插件复制的目标路径
     skin_url: '/tinymce/skins/ui/oxide',
     content_css: '/tinymce/skins/content/default'
   });
   

3. 验证导入逻辑
   保留原有的ES模块导入，确保Webpack能正确打包核心依赖：

   import tinymce from 'tinymce';
   import 'tinymce/themes/silver/theme';
   import 'tinymce/icons/default/icons';
   import 'tinymce/plugins/link';
   import 'tinymce/plugins/table';
   

内容的提问来源于stack exchange，提问作者babis95