tinymce的css在打包后找不到

Question

@tinymce/tinymce-vue

问题描述

项目使用tinymce富文本编辑器进行开发，在本地开发环境下是正常的，但是项目打包后富文本编辑器未显示
查看发现时富文本编辑器需要的css未正确引入

问题出现的平台版本及自己尝试过哪些方法

这是我本地的目录结构

打包后的结果

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

打包配置相关代码
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')

.BundleAnalyzerPlugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const Timestamp = new Date().getTime()
function resolve(dir) {

return path.join(__dirname, dir)

}
module.exports = {

publicPath: './',
outputDir: 'doctorUnit',
lintOnSave: true,
configureWebpack: {
    output: {
        filename: `[name].${Timestamp}.js`,
        chunkFilename: `[name].${Timestamp}.js`,
    },
},
chainWebpack: (config) => {
    config
        .entry('index')
        .add('babel-polyfill')
        .end()
    config.resolve.alias.set('@', resolve('src'))
    if (isProduction) {
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
        config.optimization.minimize(true)
        config.optimization.splitChunks({
            chunks: 'all',
        })
    }
},
configureWebpack: (config) => {
    if (isProduction) {
        config.optimization = {
            splitChunks: {
                minSize: 1000000,
                maxSize: 2000000,
                minChunks: 2,
                maxAsyncRequests: 5,
                maxInitialRequests: 3,
                automaticNameDelimiter: '~',
                name: true,
                chunks: 'async',
            },
        }
        config.plugins.push(
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        drop_debugger: true,
                        drop_console: true,
                    },
                },
                sourceMap: false,
                parallel: true,
            }),
            // new CompressionPlugin({
            //     test: /\.js$|\.html$|\.css/,
            //     threshold: 10240,
            //     deleteOriginalAssets: true
            // }),
            new SimpleProgressWebpackPlugin(),
        )
    } else {
    }
},
css: {
    extract: true,
    sourceMap: false,
    modules: false,
    loaderOptions: {
        less: {
            javascriptEnabled: true,
        },
    },
},
parallel: require('os').cpus().length > 1,
devServer: {
    disableHostCheck: true,
    port: 8878,
    open: true,
    compress: false,
},

}

你期待的结果是什么？实际看到的错误信息又是什么？

线上富文本编辑器引用CSS路径
https://beta-front.yiboshi.co...
正确引用路径应该为
https://beta-front.yiboshi.co...
请问在public文件夹里面的静态文件应该怎么处理，从而线上能够访问到

Answer 1

tinymce-vue使用步骤：

1. 源码下载后放到static目录下，作为静态资源使用，不打包，所以别放在public下
2. index.html中script标签引入/static/tinymce/tinymce-vue.js
3. 写vue组件：

<template>
    <editor v-model="content" :init="config"></editor>
</template>
<script>
export default {
    data: ()=> ({
        config: {
           language: 'zh'
        },
        content: ''
    }),
    // Editor是全局变量
    components: {
        'editor': Editor
    }
}