天道酬勤,学无止境

How to fix BrowserslistError in vue.js?

I created a project with vue create command, changed the directory and used npm run serve command. The error came up.

I tried updating the npm packages, but it didn't work.

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\peter\test\src\main.js: C:\Users\peter\test contains both browserslist and package.json with browsers (While processing: "C:\\Users\\peter\\test\\node_modules\\@vue\\babel-preset-app\\index.js")
    at C:\Users\peter\test\node_modules\browserslist\node.js:263:15
    at eachParent (C:\Users\peter\test\node_modules\browserslist\node.js:47:18)
    at Object.findConfig (C:\Users\peter\test\node_modules\browserslist\node.js:246:20)
    at Function.loadConfig (C:\Users\peter\test\node_modules\browserslist\node.js:177:37)
    at browserslist (C:\Users\peter\test\node_modules\browserslist\index.js:333:31)
    at getTargets (C:\Users\peter\test\node_modules\@babel\preset-env\lib\targets-parser.js:184:50)
    at getPolyfills (C:\Users\peter\test\node_modules\@vue\babel-preset-app\index.js:20:26)
    at module.exports (C:\Users\peter\test\node_modules\@vue\babel-preset-app\index.js:106:17)
    at loadDescriptor (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:165:14)
    at cachedFunction (C:\Users\peter\test\node_modules\@babel\core\lib\config\caching.js:33:19)
    at loadPresetDescriptor (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:235:63)
    at config.presets.reduce (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:74:38)
    at loadFullConfig (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:108:6)
    at process.nextTick (C:\Users\peter\test\node_modules\@babel\core\lib\transform.js:28:33)

 @ multi (webpack)-dev-server/client?http://192.168.2.117:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
标签

评论

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • BrowserslistError:未知的浏览器专业(BrowserslistError: Unknown browser major)
    问题 我正在尝试在我的角度安装中使用 bootstrap 4。 我已经运行 npm install --save bootstrap@next 但我在运行时有休息: ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser major at error (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:320:18) at Function.select (C:\xampp
  • BrowserslistError: Unknown browser major
    I'm trying to use bootstrap 4 with my angular installation. i've run npm install --save bootstrap@next but i have a break at runtime : ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser major at error (C:\xampp\htdocs\tick_master_angular\web\node_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (C:\xampp\htdocs\tick_master_angular\web\node_modules
  • BrowserslistError: Unknown version 67 of android
    I have created one angular library using angular 8 and CLI 8. I am trying to build the library, but I am getting the error. ng build <lib-name> I have gone through some questions posted related to this error, most of them say remove node_modules and reinstall them. I tried this solution but still, I am getting the following error. [Browserslist] Could not parse package.json. Ignoring it. ERROR: Unknown version 67 of android Unknown version 67 of android BrowserslistError: Unknown version 67 of android at Function.select (C:\Users\kaukhare\github\ngx-group-by-alphabates\node_modules\ng-packagr
  • laravel 6.0 版不包含资源/js 文件夹中的 vuejs 文件 assets/components,App.vue。 这是为什么以及如何解决它?(laravel version 6.0 does not include the vuejs file assets/components,App.vue, inside resources/js folder. This is why and how to fix it?)
    问题 在 Laravel 6.0 版发布后,当我安装新的 Laravel 应用程序时,它不包含vue.js文件assets/components 、 App.vue。 我不知道如何解决它。 我想在laravel和vue中开发一个项目。 require('./bootstrap'); 这是 app.js 文件,它只包含这行代码。 回答1 是的,它不包括因为它被移出一个名为 laravel/ui 的单独包中的核心,您可以使用composer安装该包,然后使用预构建的组件进行身份验证以及它提供的任何其他内容。 这是它的文档。 回答2 正如@nakov 所说,Vue 现在移至 larvel/ui 包。 要安装它,您必须在项目目录中运行composer require laravel/ui命令。 然后运行php artisan ui vue命令然后运行npm install && npm run dev 。 现在你可以看到 app.js 中有 vue 组件。
  • 如何使用 Vue.js 在 Ruby on Rails 中修复“Turbolinks 重定向无效”(How to fix 'didn't work redirect by Turbolinks' in Ruby on Rails with Vue.js)
    问题 在我的登录页面中,Turbolinks 无法重定向。 此页面使用表单登录。发布表单正确信息后,浏览器最终会转到原始页面。 我正在使用Ruby on Rails和Vue.js实现登录页面。 在加载时,我使用了Turbolinks ,所以我也使用了Vue.js插件vue-turbolinks 。 导轨:5.2.2 红宝石:2.5.1 涡轮链接:5 vue-turbolinks:2.0.4 网络打包器:3.5 用户控制器.rb # coding: utf-8 class UsersController < ApplicationController def new @user = User.new end def create @user = User.new(user_params) if @user.save flash[:success] = "registing user data" redirect_to '/' else flash[:danger] = "invalid info" redirect_to '/signup' end end private def user_params params.require(:user).permit(:user_name, :email, :password, :password_confirmation) end 新的
  • How to fix 'didn't work redirect by Turbolinks' in Ruby on Rails with Vue.js
    In my sign in page, didn't work redirect by Turbolinks. This page use form for sign in. After posting form correct information, browser end up going to original page. I'm implementing sign in page with Ruby on Rails and Vue.js. In loading, I use Turbolinks, so I did Vue.js plugin vue-turbolinks, too. Rails: 5.2.2 Ruby: 2.5.1 Turbolinks: 5 vue-turbolinks: 2.0.4 webpacker: 3.5 user_controller.rb # coding: utf-8 class UsersController < ApplicationController def new @user = User.new end def create @user = User.new(user_params) if @user.save flash[:success] = "registing user data" redirect_to '/'
  • How to fix the problem with vue.js instalation
    Good evening everybody! I'm trying to install vue.js on my linux mint using npm. When I run the simple command given in vue tutorial: npm install -g @vue/cli After some warnings the following errors appear in terminal: npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, access '/usr/local/lib' npm ERR! { [Error: EACCES: permission denied, access '/usr/local/lib'] npm ERR! stack: npm ERR! 'Error: EACCES: permission denied, access \'/usr/local/lib\'', npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall
  • 如何修复 Laravel Spark v4.0.9 上的“Vue 包版本不匹配”错误?(How do I fix a “Vue packages version mismatch” error on Laravel Spark v4.0.9?)
    问题 当我在 Laravel Spark v4.0.9 应用程序上运行npm run dev ,出现以下错误: Module build failed: Error: Vue packages version mismatch: - vue@2.0.8 - vue-template-compiler@2.2.6 This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. 我的package.json看起来像这样: { "private": true, "scripts": { "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules -
  • laravel version 6.0 does not include the vuejs file assets/components,App.vue, inside resources/js folder. This is why and how to fix it?
    After the laravel version 6.0 release, when i install the fresh laravel application it does not include the vue.js files assets/components, App.vue. i don't know how to fix it. I wanna develop a project in the laravel and vue. require('./bootstrap'); this is app.js file and it include only this line of code.
  • How to resolve eslint(vue/html-closing-bracket-newline) conflict
    On save, VSCode is fixing eslint is fixing all the rules. How to fix the below conflict? Expected Indentation Unexpected Indentation VScode Plugins in use: [ "formulahendry.auto-close-tag", "msjsdiag.debugger-for-chrome", "hookyqr.beautify", "mikestead.dotenv", "dbaeumer.vscode-eslint", "donjayamanne.githistory", "eamodio.gitlens", "sidthesloth.html5-boilerplate", "ecmel.vscode-html-css", "abusaidm.html-snippets", "wix.vscode-import-cost", "lonefy.vscode-js-css-html-formatter", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "sibiraj-s.vscode-scss-formatter", "octref.vetur",
  • 如何解决 eslint(vue/html-closure-bracket-newline) 冲突(How to resolve eslint(vue/html-closing-bracket-newline) conflict)
    问题 保存时,VSCode 正在修复 eslint 正在修复所有规则。 如何解决以下冲突? 预期缩进 意外的缩进 正在使用的 VScode 插件: [ "formulahendry.auto-close-tag", "msjsdiag.debugger-for-chrome", "hookyqr.beautify", "mikestead.dotenv", "dbaeumer.vscode-eslint", "donjayamanne.githistory", "eamodio.gitlens", "sidthesloth.html5-boilerplate", "ecmel.vscode-html-css", "abusaidm.html-snippets", "wix.vscode-import-cost", "lonefy.vscode-js-css-html-formatter", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "sibiraj-s.vscode-scss-formatter", "octref.vetur", "blanu.vscode-styled-jsx", "jcbuisson.vue", "hollowtree.vue-snippets", "wscats.vue",
  • 如何在 vue.js 中使用监听器来处理滚动和窗口大小调整等事件(how to use listeners in vue.js for events like scroll and windows resizing)
    问题 您好,我正在学习 vuejs 并且正在将我的一个项目转换为 vuejs 我想知道我可以在方法中编写我的自定义函数并在挂载的钩子中调用那些我想知道我如何在 vuejs 中使用侦听器。 我也可以通过在 vue 项目中导入来使用我的 jquery vue 网站上的事件侦听器文档仅说明了 v-on 和 click 示例,但没有针对 Windows 侦听器的示例 jQuery(document).ready(function(){ //cache DOM elements var mainContent = $('.cd-main-content'), header = $('.cd-main-header'), sidebar = $('.cd-side-nav'), sidebarTrigger = $('.cd-nav-trigger'), topNavigation = $('.cd-top-nav'), searchForm = $('.cd-search'), accountInfo = $('.account'); //on resize, move search and top nav position according to window width var resizing = false; moveNavigation(); $(window).on(
  • Sping Boot + Vue + Webpack 项目实战(三):配置静态资源、代码校验和webpack-dev-server
    前言 好了,上一篇我讲了怎么使用webpack来构建vue项目,接下将对它进一步完善,添加静态资源和代码校验及webpack-dev-server服务器,废话不多说,直接开始吧。 配置静态资源 安装 在配置之前,需要安装样式和文件资源处理的loader npm install style-loader --save-dev npm install --save-dev url-loader file-loader //url-loader是基于file-loader的 配置 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(gif|jpg|jpeg|png|svg)/, use: { loader: 'url-loader', options: { limit: 1024, // 每次输出文件的字节数的大小 name: '[name].[ext]' // 输出的文件类型 } } } ] }, css处理器 这里css处理器使用的是stylus,当然也可以使用其他处理器,可以根据个人习惯去更换,我这里使用它是因为它编写的样式简洁,容易阅读 安装 npm install stylus-loader stylus --save-dev 配置 module: {
  • How to fix “Access-Control-Allow-Origin” error in a python socket-io server
    I'm creating a project that uses Vue.js (as a client) and Python (as a server). Python is used for some calculation and the Vue.js is used for the interface. I'm connecting them using python-socketio (https://python-socketio.readthedocs.io/en/latest/) and Vue-socket.io (https://github.com/MetinSeylan/Vue-Socket.io). Some weeks ago it was working just fine. The connection and communication was happening succefully. But a couple days ago I tried running the same code again and this error appeared: ► Access to XMLHttpRequest at shttp://localhost:2003/socket.io/?EI0.38transport.polling&t=Mom6k2V'
  • 《vue.js从入门到项目实战》之Vue项目化笔记
    Vue项目化 前言: 《vue.js从入门到项目实战》的第六章和第八章。尝试一下Vue项目化的过程。 前置内容:vue的基础知识 上次学习了《vue.js从入门到项目实战》的前六章,重点学习了第二、三、四章的Vue实例和模板语法;了解了一下Vue组件(可复用的Vue实例)和Vue项目化(Vue CLI、Vue router、vuex) 接触了一部分Vue项目化的理论,这次对这一部分进行实践,边实践边记录遇到的问题。 文章目录 Vue项目化前言:理论内容Vue脚手架:Vue CLI前端路由:Vue router状态管理:Vuex 遇到的问题1npm安装淘宝镜像报错2安装vue.js报错3引入Vue模块报错4安装Vue CLI没报错5初始化项目出现了一个有意思的事6安装项目依赖出现问题 尝试运行第八章的项目 理论内容 Vue脚手架:Vue CLI 是Vue官方提供的构建工具,五分钟就可以搭建一个完整的Vue应用。 前端路由:Vue router ajax实现了无刷新的数据交互、前端路由实现了无刷新的页面跳转。ajax将web page发展成web app,而前端路由给web app增加了更多可能,如单页面应用。 Vue router是官方提供的路由管理器,致力于简化单页面应用的构建。 状态管理:Vuex 对于小型应用来说,完全没必要引入状态管理,因为这会带来更多开发成本
  • 从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境
    Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套规范的 Vite + Vue3 + TypeScript 前端工程化项目环境。 本文篇幅较长,从以下几个方面展开: 架构搭建代码规范提交规范单元测试自动部署 本项目完整的代码托管在 GitHub 仓库,欢迎点亮小星星 🌟🌟 技术栈 编程语言:TypeScript 4.x + JavaScript构建工具:Vite 2.x前端框架:Vue 3.x路由工具:Vue Router 4.x状态管理:Vuex 4.xUI 框架:Element PlusCSS 预编译:Stylus / Sass / LessHTTP 工具:AxiosGit Hook 工具:husky + lint-staged代码规范:EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide提交规范:Commitizen + Commitlint单元测试:vue-test-utils + jest + vue-jest + ts-jest自动部署:GitHub Actions 架构搭建 请确保你的电脑上成功安装 Node.js
  • 将 Vue 部署到 GitHub Pages。 vue-router 出错(Deploy Vue to GitHub Pages. Error with vue-router)
    问题 在使用 vue-cli v3.0 部署 Vue 应用程序构建时,我遇到了一些麻烦。 到 GitHub 页面。 我正在使用子树将dist文件夹仅发送到gh-pages分支。 首先的问题是,资产在那里没有找到,但我把它用固定baseUrl上vue.config.js 。 现在的问题是#app元素是空的。 我发现如果我不使用vue-router (直接渲染视图而不是使用<router-view/> ),该应用程序可以在 GitHub 页面上正常工作。 我相信路由path选项存在一些问题,但我无法弄清楚如何修复它。 有问题的存储库是 https://github.com/guizoxxv/vue-cli-deploy,GitHub 页面链接是 https://guizoxxv.github.io/vue-cli-deploy/ 谢谢你。 回答1 我相信我发现了这个问题的原因: 由于 GitHub Pages URL 不是从根提供的 https://guizoxxv.github.io/vue-cli-deploy/在 root /之后有vue-cli-deploy/ / 我需要在vue-router选项上为我的应用程序指定一个base选项。 这是文档 https://router.vuejs.org/api/#base 回答2 2020 年更新 baseUrl是废弃了
  • vue-cli使用
    使用npm命令需要先安装node.js,详细可去菜鸟教程https://www.runoob.com/nodejs/nodejs-install-setup.html Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 下载vue-cli,在nodejs全局安装路径下 npm install -g vue-cli G:\resourcesWY\vue-cli>vue init webpack vueDemo#初始化、打包、命名 ? Project name vue_demo#项目名字不能有大写 ? Project description A Vue.js project ? Author littleyy <156922****@qq.com> ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been
  • 如何修复在控制台上找不到的 CSRF 令牌(how to fix CSRF token not found on console)
    问题 如何修复在 Laravel 5.4 上找不到的 CSRF 令牌,我尝试在 Laravel 中学习 vue js,但我的控制台中出现错误“找不到 CSRF 令牌”,请帮助我如何解决此错误。 回答1 您可以添加以下元标记 <meta name="csrf-token" content="{{ csrf_token() }}"> 回答2 如果您正在使用 Vue,请按以下方式操作: Vue.http.interceptors.push(function (request, next) { request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken; next(); }); 要么 <script> window.Laravel = <?php echo json_encode([ 'csrfToken' => csrf_token(), ]); ?> </script> 回答3 1)这个错误来自哪里? 这个错误来自resources/js/bootstrap.js 2)为什么会出现这个错误? 见下面的片段,它试图找出名称 csrf-token 的元标记,如果找到令牌,则将其作为标头添加到 axios http library.else 显示错误 let token = document.head.querySelector('meta
  • 为什么 Vue.js Chrome Devtools 没有检测到 Vue.js?(Why is Vue.js Chrome Devtools not detecting Vue.js?)
    问题 我有一个简单的工作 Vue.js 应用程序的以下代码。 但是 vue.js devtools 没有响应。 几天前它运行良好,现在它不再运行了,可能是哪里出了问题? 当我去 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 时,它说它已经添加了。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script> <title>Document</title> </head> <body> <div class="container"> <div id="application"> <input type=