可能需要一个合适的加载器来处理这种文件类型......发生在每个 vuetify 组件上

Question

我有一个项目有一个 rails 后端和一个 Vue 前端。我在两端之间工作，现在我正在尝试添加 Vuetify 以使其看起来更好。

我运行vue install vuetify得到了

Running completion hooks... ERROR  Error: ENOENT: no such file or directory, open './draw-front/public/index.html'
Error: ENOENT: no such file or directory, open './draw-front/public/index.html'

所以，我尝试通过指南手动添加 on the vuetify website，但无论我使用哪种方法，我都会收到错误消息，指出组件没有合适的处理程序

  error  in ./node_modules/vuetify/lib/components/VCombobox/VCombobox.js

 Module parse failed: Unexpected token (69:44)
 You may need an appropriate loader to handle this file type.
 | 
 |       if (this.multiple) {
 |         chip.componentOptions.listeners = { ...chip.componentOptions.listeners,
 |           dblclick: () => {
 |             this.editingIndex = index;

  @ ./node_modules/vuetify/lib/components/VCombobox/index.js 1:0-36
  @ ./node_modules/vuetify/lib/components/index.js
  @ ./node_modules/vuetify/lib/index.js
  @ ./src/plugins/vuetify.js
  @ ./src/main.js
  @ multi (webpack)-dev-server/client?http://localhost:5106 webpack/hot/dev-server ./src/main.js

大约 20 个不同的组件存在类似的错误，在浏览器中我只得到 Cannot GET /

版本： @vue/cli 4.1.2 Rails6.0.2.1 ruby2.6.5p114

依赖项

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuetify": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chai": "^4.1.2",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^4.0.0",
    "sinon-chai": "^2.8.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-cli-plugin-vuetify": "^2.0.3",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "vuetify-loader": "^1.3.0",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },

Answer 1

您是哪一年创建 Vue.js 项目的？您的 package.json 看起来很旧，Vuetify 安装需要更新您的项目。

我建议您使用 Vue CLI（最新版本）创建一个新项目，安装 Vuetify，然后将您的文件从旧项目迁移到新项目。

看似辛苦，其实很简单

也使用 Node.js 的最新版本。

可能需要一个合适的加载器来处理这种文件类型......发生在每个 vuetify 组件上

May need an appropriate loader to handle this file type...happening on every vuetify component

webpack

vue.js

yarnpkg

vuetify.js