首页 > 解决方案 > 使用 Vue CLI 3 安装 Vuetify 后编译失败

问题描述

我尝试使用Vuetify homepage中的命令使用Vuetify创建一个新的 Vue 应用程序。

以下是我使用的命令:

npm install @vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running

上面提到的所有命令都完美完成。但是,在我通过以下命令启动热重载开发环境后。

npm run serve

以下标准输出将发生错误。

> my-app@0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve

INFO  Starting development server...
94% after seal                                                                        

ERROR  Failed to compile with 1 errors                                                    3:05:24 PM

error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/@vue/babel-preset-app/index.js$0")
    at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
    at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
    at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
    at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
    at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
    at getTargets (/home/seanwu/my-app/node_modules/@babel/preset-env/lib/targets-parser.js:133:50)
    at _default (/home/seanwu/my-app/node_modules/@babel/preset-env/lib/index.js:184:46)
    at /home/seanwu/my-app/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at loadDescriptor (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:163:14)
    at cachedFunction (/home/seanwu/my-app/node_modules/@babel/core/lib/config/caching.js:42:19)
    at loadPresetDescriptor (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:233:63)
    at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:68:19)
    at Array.map (<anonymous>)
    at recurseDescriptors (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:66:38)
    at recurseDescriptors (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:92:27)
    at loadFullConfig (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:106:6)

@ multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我不知道为什么会发生这种情况,因为它是前端开发的新手,并且遵循快速入门网页上的每一条指令。也许我犯了一些愚蠢的错误导致了这个错误。

标签: npmvuejs2vuetify.jsvue-cli-3

解决方案


您使用的是什么 Node/npm 版本?我假设官方教程在某个时候有效/有效。我会使用nvm安装不同的 Node.js 版本。这也改变了 npm 版本。然后再试npm install一次npm start

或者您可以删除.browserslistrcin /home/seanwu/my-app,这样您就没有两个冲突的文件。


推荐阅读