带有 Vue-cli 3 的 html2canvas v0.5.0-beta4

Question

如何在 Vue-cli 3 中使用 html2canvas v0.5.0-beta4？ 我安装了 html2canvas v0.5.0-beta4 并导入它，但我得到了错误。 最新的 html2canvas 就是这样工作的。

安装命令：

$ npm install --save html2canvas@0.5.0-beta4

myComponent.vue 中的代码：

<script>
import html2canvas1 from 'html2canvas'
</script>

错误：

Failed to compile.

./node_modules/html2canvas/dist/npm/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/Users/username/myapp/node_modules/html2canvas/dist/npm/index.js'

dist 文件夹中的已安装文件：

Answer 1

package.json 指定主要目标为“dist/npm/index.js”， 但它默认不存在，因为“dist”是在 .gitignore 文件中定义的。

您应该手动运行“npm run build”，然后它应该可以工作。

  {
  "title": "html2canvas",
  "name": "html2canvas",
  "description": "Screenshots with JavaScript",
  "main": "dist/npm/index.js",  <--- here
  "module": "dist/html2canvas.js",
  "browser": "dist/html2canvas.js",
  "version": "1.0.0-alpha.12",
  "author": {
  "name": "Niklas von Hertzen",
  "email": "niklasvh@gmail.com",
  "url": "https://hertzen.com"
  },
  "engines": {
  "node": ">=4.0.0"
  },
  "repository": {
  "type": "git",
  "url": "git@github.com:niklasvh/html2canvas.git"
  },
  "bugs": {
  "url": "https://github.com/niklasvh/html2canvas/issues"
  },
  "devDependencies": {
  "babel-cli": "6.24.1",
  "babel-core": "6.25.0",
  "babel-eslint": "7.2.3",
  "babel-loader": "7.1.1",
  "babel-plugin-dev-expression": "0.2.1",
  "babel-plugin-external-helpers": "^6.22.0",
  "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
  "babel-plugin-transform-object-rest-spread": "6.23.0",
  "babel-preset-es2015": "6.24.1",
  "babel-preset-flow": "6.23.0",
  "base64-arraybuffer": "0.1.5",
  "body-parser": "1.17.2",
  "chai": "4.1.1",
  "chromeless": "1.2.0",
  "cors": "2.8.4",
  "eslint": "4.2.0",
  "eslint-plugin-flowtype": "2.35.0",
  "eslint-plugin-prettier": "2.1.2",
  "express": "4.15.4",
  "filenamify-url": "1.0.0",
  "flow-bin": "0.56.0",
  "glob": "7.1.2",
  "html2canvas-proxy": "1.0.1",
  "jquery": "3.2.1",
  "karma": "1.7.0",
  "karma-chrome-launcher": "2.2.0",
  "karma-edge-launcher": "0.4.1",
  "karma-firefox-launcher": "1.0.1",
  "karma-ie-launcher": "1.0.0",
  "karma-mocha": "1.3.0",
  "karma-sauce-launcher": "1.1.0",
  "mocha": "5.2.0",
  "platform": "1.3.4",
  "prettier": "1.5.3",
  "promise-polyfill": "6.0.2",
  "replace-in-file": "^3.0.0",
  "rimraf": "2.6.1",
  "rollup": "0.57.1",
  "rollup-plugin-babel": "^3.0.3",
  "rollup-plugin-commonjs": "^9.1.0",
  "rollup-plugin-node-resolve": "^3.3.0",
  "rollup-plugin-uglify": "^3.0.0",
  "serve-index": "1.9.0",
  "slash": "1.0.0",
  "uglifyjs-webpack-plugin": "^1.1.2",
  "webpack": "3.4.1"
  },
  "scripts": {
  "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser", <---- build script to run!!
  "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
  "build:browser": "webpack",
  "rollup": "rollup -c",
  "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www/src,tests,scripts}/**/*.js\"",
  "flow": "flow",
  "lint": "eslint src/**",
  "test": "npm run flow && npm run lint && npm run test:node && npm run karma",
  "test:node": "mocha tests/node/*.js",
  "karma": "node karma",
  "watch": "webpack --progress --colors --watch",
  "start": "node tests/server"
  },
  "homepage": "https://html2canvas.hertzen.com",
  "license": "MIT",
  "dependencies": {
  "css-line-break": "1.0.1"
  }
  }