天道酬勤,学无止境

vue-cli

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

2022-06-02 14:20:04    分类:问答    vue.js   vue-cli

Created a new vue project using vue/cli create but cannot serve

Last week I had nothing wrong on creating a new project and serving it, but today when I use vue/cli to create a new default project, I got a compile error when serving. PS E:\Projects\testing> yarn serve yarn run v1.22.5 $ vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin ERROR Failed to compile with 1 error 下午12:22:33 error in ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js Module parse failed: Unexpected token (763:13) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See

2022-05-02 08:18:12    分类:问答    node.js   vue.js   vuejs3   vue-cli   vue-cli-4

Errors in browser console, requests to /sockjs-node/info?t=1555629946494

I created a new site using vue-cli. I'm using the development server to serve the page. When I view the page in my browser, I see two types of errors show up in my browser console: GET http://172.31.7.153:4000/sockjs-node/info?t=1555922702538 net::ERR_CONNECTION_TIMED_OUT GET http://localhost:4000/sockjs-node/info?t=1555922708541 net::ERR_CONNECTION_REFUSED I'm not sure what it means, or how/why it's being called, and it shows up repeatedly about every 5 seconds.

2022-05-02 05:35:14    分类:问答    vue.js   vue-cli

Callback of onMounted is not being triggered in vue 3 plugin that bundled by webpack

Forgive me for getting long content to explain my problem. I made a simple npm vue3-helloword-webpack plugin. This plugin consoles the simple text from inside the onMounted method. If I bundle this helloworld plugin using vue-cli tool, the callback of onMounted from plugin would be triggered. But same does not happen while bundling by webpack. I think the problem is occurred because of currenIntance(I guess it’s a vue instance) is null as shown in below image. Content: when the plugin is bundled by webpack Webpack.config.babel.js const TerserPlugin = require("terser-webpack-plugin") const

2022-05-01 08:35:16    分类:问答    javascript   vue.js   webpack   vuejs3   vue-cli

Vue.js 3: Cannot import Vue global object

I'm going crazy trying to reconcile the Vue 3 CLI output into something that works with various tutorials and plugins that all use the Vue object, as in Vue.createApp(.... In my project, I can use import {createApp} from 'vue'; createApp(... but import Vue from 'vue'; results in Vue still being undefined. I have Vue 3 installed via NPM. Clearly there is something critical that I don't understand about NPM imports, how could the {createApp} import work if importing the whole module does not work? From package.json: "dependencies": { "@babel/polyfill": "^7.12.1", "apexcharts": "^3.22.1", "core

2022-05-01 05:53:11    分类:问答    vue.js   npm   vue-cli   vuejs3

Proxy `changeOrigin` setting doesn't seem to work

I'm using Vue CLI 3.0.0 (rc.10) and am running two servers (backend server and WDS) side by side. I followed the devServer.proxy instructions on the Vue CLI documentation to add a proxy option to my vue.config.js. I also followed the instructions for the http-proxy-middleware library to supplement the options: module.exports = { lintOnSave: true, outputDir: '../priv/static/', devServer: { proxy: { '/api': { target: 'http://localhost:4000', changeOrigin: true, ws: true, }, }, }, }; My understanding is that the changeOrigin: true option needs to dynamically change the Origin header on the

2022-04-29 04:51:15    分类:问答    vue.js   vue-cli

Could not find a declaration file for third party modules - how to declare and resolve these errors

I am working on a project with typescript (generated with vue cli 3.0). When I import third party modules, I get errors such as: Could not find a declaration file for module 'vue-slider-component'. '/home/wahid/Development/tealvalley-app/node_modules/vue-slider- component/dist/index.js' implicitly has an 'any' type. What is the correct way to resolve these kind of issues? The types are not defined in the @types package, so if I were to define them myself, where do I keep it?

2022-04-27 08:12:43    分类:问答    typescript   vuejs2   typescript-typings   vue-cli

Add _redirects file to root path for Vue SPA hosted on Netlify

I'm developing a Single Page App using Vue CLI and want history pushstate to work so I get clean URLs. I have to follow this: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps and add a _redirects file to the root of my site folder with the following: /* /index.html 200 The problem is I don't know how to add this _redirects file to the root of my dist folder. I tried adding it to the static folder but it ends up in a subfolder and not in root. How can I include this file so that history mode works after deploying on Netlify ? // config/index.js build: { // Paths

2022-04-27 00:18:35    分类:问答    vue.js   single-page-application   vue-cli   netlify

Vue 3 - "Failed to resolve component" with global components

My Vue components work fine when declared in the top level HTML file, like this <body> <div class='app' id='app'> <header-bar id='headerBar'></header-bar> <journal-page></journal-page> </div> <script src="js/app.js"></script> </body> but using a <journal-card> component inside the <journal-page> component gives me the error: [Vue warn]: Failed to resolve component: journal-card at <JournalPage>. How do I fix this please? Here's my top level code that loads the Vue components, app.js: import * as _vue from 'vue'; import _headerBar from './widgets/headerBar.vue'; import _journalCard from '

2022-04-16 12:29:18    分类:问答    javascript   vue.js   vue-component   vue-cli   vuejs3

Vue.js stuck on serving at 40% how to recover?

I decided to delete the node modules folder, do a npm install then do a npm run serve it always gets stuck around 40% and stays there forever. When done from the UI it also gets stuck on a similar amount: $ vue-cli-service serve --open --mode development --https --dashboard INFO Starting development server... 40% building 118/134 modules 16 active ...tApp\node_modules\axios\lib\defaults.js another time: 40% building 134/147 modules 13 active ...\node_modules\axios\lib\adapters\xhr.js I notice Node.js process is constantly going at around 15%, but nothing happens if I wait and wait and wait

2022-04-05 10:07:06    分类:问答    node.js   vue.js   vue-cli