vue-cli4引用UEditor碰到的坑

Posted 2023-04-27

参考技术A 由于最近升级了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的目录，最后那个 / 不能忘！

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

使用Vue-cli创建project遇到的坑

环境：

　　win10 / node( v10.2.1) /npm( v5.6.0)

准备：

　　1.安装node：上node官网下载node版本进行安装

　　2.安装vue-cli：npm install --global vue-cli

　　注：闲速度慢可以把镜像切换到国内镜像，再进行安装

　　npm install -g cnpm --registry=https://registry.npm.taobao.org　　

　　cnpm install -g vue-cli　　

问题：

　　安装好node和vue-cli后，进行项目的创建时，一直卡在项目名称处，具体如下图

　　

 

网上搜各种解决方案。。最后发现可能是node版本过高导致，把node版本换到稳定版（v8.11.2）后搞定。。具体问题没找到，知道的大神望给与解释，感激不尽~