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

Question

我尝试使用 Vuetify by using the command from Vuetify homepage 创建一个新的 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[=12=]")
    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

我不知道为什么会发生这种情况，因为它是前端开发的新手并且遵循 Quick Start 网页中的每条指令。可能是我犯了一些愚蠢的错误导致了这个错误。

Answer 1

您使用的 Node/npm 版本是什么？我会假设官方教程 works/worked 在某个时候。我会使用 nvm 安装不同的 Node.js 版本。这也会更改 npm 版本。然后再次尝试 npm install 和 npm start。

或者您可以删除 /home/seanwu/my-app 中的 .browserslistrc，这样就不会出现两个冲突的文件。

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

Failed to Compile After Installing Vuetify with Vue CLI 3

npm

vuejs2

vuetify.js

vue-cli-3