Tag Archives: View.js

[Solved] Vue3 Configuration routing error: Catch all routes (“*“) must now be defined using a param with a custom regexp.

@[TOC] (vue3) catch all routes (“*”) must now be defined using a param with a custom regexp.)

Background

When the vue3 project specifies an unrecognized path to automatically jump to the 404 page when configuring the route, it reports an error catch all routes (“*”) must now be defined using a param with a custom regexp. </ font>
this means that all routes (“) must now be defined with a parameter with a self-defined regular expression

Solution

Change to the following configuration mode:

{
    path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
    redirect: '/404',
},

Full routing configuration:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/views/Index/Index.vue'),
  },
  // {
  //   path: '/', // Root directory auto-match/home
  //   redirect: '/index',
  // },
  {
    path: '/404',
    name: 'PageNotExist',
    component: () => import('@/views/PageNotExist/PageNotExist.vue'),
  },
  {
    path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
    redirect: '/404',
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

[Solved] Some chunks are bigger warning on vite packaging

Solution:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
	plugins: [vue()],
	build: {
		rollupOptions: {
			output: {
				//Solve Warning: Some chunks are larger
				manualChunks(id) {
					if (id.includes('node_modules')) {
						return id.toString().split('node_modules/')[1].split('/')[0].toString();
					}
				}
			}
		}
	}
})

The problem that the El icons icon cannot be displayed in vue3 + element plus + vite

The problem that the El icons icon cannot be displayed in vue3 + element plus + vite

Recently, I used the new vue3 + element plus to do front-end project exercises. Using the latest vite, I found that the icons of element can’t be displayed. According to the usage in the official documents, other components can be displayed normally, but the icons can’t be displayed. I asked several front-end leaders of the company that they hadn’t used these new things, Baidu couldn’t find a solution after a long time, so it had no choice but to go to GitHub of vite and finally found that

it was the version problem of vite, so switching vite version can display icons normally

After several years of Java, I found the answer in GitHub for the first time, which was the front end… It can only be said that the pits of java have been trampled by the predecessors

[Solved] Error in callback for watcher “value“: “TypeError: Cannot read property ‘level‘ of null“

The cascade selector selects multiple selection{   Multiple: true} and any one level option {checkstrict: true} will be invalid when you click , and an error will be reported as follows

Cascade selection has strict requirements on data. Each data item contains at least two items: value and label, and the subset is children </ Font> the data styles provided on the official website are as follows:

Here is my data on the console

When I change the value of value from int type to string type, I will not report an error. See the figure below for details.

The simplest way is + “, when any type is added to string, it will be converted to string first

[Solved] Turf.js error: uncaught (in promise) error: the solution of invalid unit

Solution for turf.js error: Uncaught (in promise) Error: Invalid unit
Error code (npm i turf):

import turf from 'turf';

var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
var options = {units: 'miles'};

var along = turf.along(line, 200, options); // Wrong

Correct code (NPMI @ turf/turf)

import * as turf from '@turf/turf';

var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
var options = {units: 'miles'};

var along = turf.along(line, 200, options);

[Solved] ERROR command failed: npm install –loglevel error –legacy-peer-deps

When I created a new Vue project today, I made a mistake like the title, which was disgusting at that time

Try the method of online God

Find the content to be modified by C:: (users/owner). Vuerc  “ Usetaobaoregistry “: false, if the value is true or false, it is not easy to use

Then a whim called CMD as administrator to recreate the project successfully

For reference only, by the way, ask if there is a big God how to solve this problem: how to make the CMD run smoothly under the permission of non administrator?

Vue introduction path is correct, but it always reports an error: already included file name‘ ××ב differs from file name ‘ ××ב only in casing.

Vue import path ××× from ‘ ×××’ Error
the file name and address introduced are correct, but the error is still reported
already included file name‘ ×××’ differs from file name ‘ ×××’ only in casing.

At this time, we just need to remove the suffix Vue of the file name
solution

Solution 1: remove the suffix Vue of the file name

Solution 2: change the point in front of the path to@

Path

function

./

current file sibling directory

./

current file superior directory

@

when importing a module, you can use @ instead of/SRC directory to refer to the relative path

Solution of Vue router loading components on demand

Now you can see the official website to explain how to load components on demand as follows:

// The combination of vue asynchronous components and webpack's [code chunking point] feature enables on-demand loading
const App = () => import('../component/Login.vue');

We usually report this error when using it:

Module build failed: SyntaxError: Unexpected token

It can be found that Import reported an error because Babel couldn’t resolve the error and needed to download the plug-in

cnpm install babel-plugin-syntax-dynamic-import --save-dev

Modify . Babelrc after downloading

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": ["syntax-dynamic-import"]
}

In this way, it can be introduced on demand