在使用Vue CLI 3安装Vuetify后编译失败

Question

在使用Vue CLI 3安装Vuetify后编译失败

4

我尝试使用Vuetify的命令创建一个新的Vue应用程序，该命令来自于Vuetify主页。

以下是我使用的命令：

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

我不知道为什么会发生这种情况，可能是因为我刚开始学前端开发，并且遵循快速入门网页上的每一个指导。也许是我犯了一些愚蠢的错误导致了这个错误。

- Shuang Wu

好奇怪啊.. 几周前，一切都很好。我运行了相同的命令，一切正常。现在，它变得一团糟了。 - jaletechs

你找到解决方案了吗？我尝试了vue create <my-project>，首先通过Vue CLI 3设置了我的项目，然后执行了vue add vuetify，但是在控制台上只看到一堆

[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

。令人悲伤的是，这种情况发生在Vue最受欢迎的框架之一上。 - Irfandy Jip

在我的情况下，似乎 Vuetify 安装中的 babel/polyfill 选项需要在我创建 Vue 项目时使用 CSS 预处理器。我已经在答案的评论中回复了这个问题。 - Shuang Wu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user835611 · Accepted Answer

你使用的是什么Node/npm版本？我会假设官方教程在某个时间点上有效。我会使用nvm来安装不同的Node.js版本。这也会更改npm版本。然后再尝试npm install和npm start。或者你可以删除/home/seanwu/my-app中的.browserslistrc，这样就不会有两个冲突的文件了。