How to embed HTML pages in Vue+Webpack project to realize click jump

VUE project embedded HTML page, click to jump

background

Refactor the project (change the front-end and back-end projects to VUE), keep the previous code logic as much as possible, and move a printing logic to the Vue project. It was originally a page for printing barcodes written in HTML, but now it needs to Embed directly into the project

accomplish

Ideas:

1. Open the page directly through window.open
2. The directory of the file selection is very important
   • Select the current directory, the file can be found locally through the relative path, but it will not be found after the server is deployed
   • So use webpack to package and put the files in the static folder (after webpack packages, the contents of the static folder will be packaged intact)

Code

1. jump code

const originUrl = `${
      
      window.location.origin}/static/print/printDoubleCode.html?${
      
      codes}`;
window.open(originUrl, "_blank");

2. How to find the file after deployment, you need to change a webpack configuration assetsPublicPath.
   Change assetsPublicPath: '/' to './' in config.js