vue项目打包里面pubilc里的 tinymce里的js文件问题

news2025/4/19 2:28:24

以下是解决 Vue 项目打包后 public/tinymce 中 JS 文件路径问题的完整方案：

问题原因

当使用 public 目录存放静态资源时，Vue CLI 默认会将 public 下的文件 直接复制到打包目录的根路径，但以下操作可能导致路径错误：

开发环境使用相对路径（如 ./tinymce/...）
未正确配置 vue.config.js 的 publicPath
打包后文件路径层级发生变化

解决方案

1. 确认文件目录结构

确保项目结构如下：

public/
└── tinymce/
    ├── js/
    │   ├── tinymce.min.js       # 核心文件
    │   └── themes/             # 主题文件
    └── skins/                  # 皮肤文件

2. 动态加载 Tinymce 的正确姿势

在 Vue 组件中 动态拼接绝对路径：

// 在组件初始化时加载 Tinymce
import { BASE_URL } from '@/config' // 或直接使用 process.env.BASE_URL

export default {
  mounted() {
    const tinymceScript = document.createElement('script')
    tinymceScript.src = `${BASE_URL}tinymce/js/tinymce.min.js`
    tinymceScript.onload = () => {
      this.initTinymce()
    }
    document.head.appendChild(tinymceScript)
  },
  methods: {
    initTinymce() {
      tinymce.init({
        selector: '#editor',
        skin_url: `${BASE_URL}tinymce/skins/ui/oxide`, // 关键路径配置
        theme_url: `${BASE_URL}tinymce/themes/silver/theme.min.js`
      })
    }
  }
}

3. 配置 `vue.config.js`

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/your-production-base-path/'  // 生产环境部署路径
    : '/',                           // 开发环境路径
  
  chainWebpack: config => {
    // 防止 Tinymce 相关文件被 Webpack 处理
    config.module
      .rule('tinymce')
      .test(/tinymce[\\/].+\.(js|css|woff|woff2|ttf|eot|svg)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'tinymce/[name].[hash:8].[ext]',
        esModule: false
      })
  }
}

4. 验证打包结果

检查 dist 目录结构：

dist/
├── tinymce/
│   ├── js/
│   └── skins/
├── css/
├── js/
└── index.html

常见问题排查

问题现象	解决方案
404 找不到 JS 文件	检查 `publicPath` 是否与部署路径匹配
主题/皮肤加载失败	确认 `skin_url` 和 `theme_url` 路径是否指向打包后的目录
生产环境控制台报错开发环境正常	使用 `process.env.NODE_ENV` 区分环境配置路径
字体文件加载失败	在 `vue.config.js` 中添加字体文件的 `file-loader` 规则

替代方案（推荐）

如果项目允许，建议通过 npm 安装 Tinymce 以规避路径问题：

npm install tinymce @tinymce/tinymce-vue

// 在 Vue 中按需引入
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/ui/oxide/skin.min.css'

export default {
  mounted() {
    tinymce.init({ /* 配置 */ })
  }
}