VUE项目内嵌HTML页面,点击跳转
背景
重构项目(前后端不分离的项目改成VUE),尽可能不动之前的代码逻辑,就需要将一个打印逻辑搬到vue项目里,原来是一个HTML写的一个打印条码的页面,现在要直接嵌入项目里
实现
思路:
- 通过window.open直接打开页面
- 文件选择的目录很重要
- 选择当前目录,通过相对路径本地可以找到文件,但是当部署服务器之后就会找不到
- 所以要借助webpack打包,将文件放在static文件夹中(webpack打包之后会把static文件夹里面的东西原封不动的打包)
代码实现
- 跳转代码
const originUrl = `${window.location.origin}/static/print/printDoubleCode.html?${codes}`;
window.open(originUrl, "_blank");
- 如何部署后还是找不到文件,需要改一个webpack配置assetsPublicPath。
在config.js把assetsPublicPath:‘/‘改成’./’