vue-cli4引用UEditor碰到的坑

由于最近升级了vue-cli4 跟以往的配置方式不一样 导致引用出现很多坑
引入UEditor时样式文件失效 但是确实是引用进去了,并且运行的时候页面上有报错,某个方法没有找到,后面查找资料是webpack将文件进行了处理 导致UEditor引用文件路径失效无法找到,才报的错。下面上解决方法。

首先vue-cli4项目根目录没有webpack配置文件 所以自己创建一个vue.config.js

vue.config.js配置文件参考链接:https://zhuanlan.zhihu.com/p/109952157

在头部引用
const CopyWebpackPlugin = require('copy-webpack-plugin')
这个插件是拷贝插件,告诉webpack打包的时候不要处理其中指定的文件,直接将文件复制到指定目录

configureWebpack: {
plugins: [new CopyWebpackPlugin({
patterns: [
{ from: './src/assets',
to: './assets/'}
], })]
},

在UEditor根目录下有个ueditor.config.js,将window.UEDITOR_HOME_URL对应自己存放ueditor的目录,最后那个 / 不能忘!

图片1

我这里是将UEditor放置src目录下的assets,所以直接将它也输出到assets,我这里直接路径写死了,也可以改成变量的形式,主要是由于UEditor里有个配置文件的路径要跟它对应 也是一个坑吧,最后运行和压缩都能完美显示。

图片2

你可能感兴趣的:(vue-cli4引用UEditor碰到的坑)