如何在Vue2或Webpack4项目中正确集成SVG-Edit编辑器

两类方案报错的核心原因均为SVG-Edit编译产物的资源引用路径和项目实际部署路径不匹配，可按对应环境调整配置解决：

Vue2 环境修复步骤 #

• 将编译后的svg-edit代码放在public/svgedit子目录下，避免散放在public根目录出现路径冲突
• 无需配置多页项目，在需要调用SVG-Edit的页面通过iframe引入即可，路径写为process.env.BASE_URL + 'svgedit/index.html'
• 若仍有资源报错，修改SVG-Edit的编译配置，将其构建publicPath改为./后重新编译，再把产物复制到对应目录即可

Webpack4 环境修复步骤 #

• 配置copy-webpack-plugin时，指定将SVG-Edit编译产物统一复制到构建产物的svgedit子目录下，参考配置项：{ from: path.resolve(__dirname, './本地svg-edit编译产物路径'), to: 'svgedit' }
• 匹配项目webpack.config.js中的output.publicPath配置，开发环境设为/，生产环境设为实际部署的站点根路径
• 引入SVG-Edit时路径统一写为publicPath + 'svgedit/index.html'，和构建配置保持一致即可

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