Error details:
error Component name “School” should always be multi-word vue/multi-word-component-names
Cause: when checking the syntax, the non-standard naming is regarded as a syntax error.
Solution: turn off syntax checking
Add the following codes in vue.config.js:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false /*Turn off syntax checking*/
})vue3 project error: error Delete `··` prettier/prettier
Run
npm run lint --fixIt depends on what tool is used. If you use yarn or pnpm, you can replace it
If present
Open package.json file, and view the configuration
For example, the configuration of my project is as follows
The command to run is:
npm run lint:eslint --fix Then restart the project
Supplement:
Found that error Delete `——–␍⏎` prettier/prettier is too much when using webstorm, and every time I modify the code, this error will appear, which is troublesome to operate. So choose to close the Prettier code specification directly
Just configure it in the rules in eslintrc.js
'prettier/prettier': 'off'Error Messages:
Compiled with problems:X
ERROR in ./src/router/index.js 2:0-23
Module not found: Error: Can’t resolve ‘vue ‘ in ‘D:\F\XX\project-SPH\app\src\router’ERROR in ./src/router/index.js 3:0-36
Module not found: Error: Can’t resolve ‘vue-router ‘ in ‘D:\F\XX\project-SPH\app\src\router’ERROR in ./src/router/index.js 8:0-36
Module not found: Error: [CaseSensitivePathsPlugin] `D:\F\XX\project-SPH\app\src\pages\search\index.vue` does not match the corresponding path on disk `Search`.
The incorrect index.js code at this point is as follows:
// Where to configure routing
import Vue from 'vue ';
import VueRouter from 'vue-router ';//Using the plug-in
Vue.use(VueRouter);
//Introduction of routing components
import Home from '@/pages/Home'
import Search from '@/pages/search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//configure routing
export default new VueRouter({
//configure routing
routes:[
{
path : "/home",
component:Home
},{
path: " /search",
component:Search
},{
path: " /login",
component:Login
},{
path: " /register",
component:Register
}
]
})Process
At first, it was because Vue-router could not be installed. I suspected that Vue-router was not installed properly.
After an afternoon of Googling to find the cause, I decided to look at the code myself to see what the error meant. There are a total of 3 code: all point to the index.js file.
The first place: pointing to Search, I looked at the reference Search place, found written in lower case.
The second place: the reference to vue and vue-router, after careful observation, I found that I wrote an extra space.
After correction, it can be run again without any error.
[react] prompt syntaxerror: unexpected token
1. background
Use react scaffold to build the project
When executing npm start, an error occurred, please check the node version.
2. problem-solving
Problem Description:
Express JWT is not a function
Cause analysis:
The express JWT I installed is version 7.7.5, and the usage has changed.
https://www.npmjs.com/package/express-jwt
Check the official documents for the latest usage
Solution:
1. import
var { expressjwt:jwt } = require("express-jwt")2. registration
app.use(jwt({
secret: 'shhhhhhared-secret', algorithms: ['HS256']
}).unless({ path:[/^\/api\//] }))
.unless ({specify the path without access permission with regular})
Or another method, directly add the unique protected path address as a parameter:
app.use("/api", jwt({
secret: "shhhhhhared-secret", algorithms: ["HS256"]
}));3. user data
Once parsed successfully, the user data contained in the Token will be automatically mounted on req.auth
// This is an API interface with permissions
app.get('/admin/getinfo', function (req, res) {
// TODO_05: use req.auth to get the user information and use the data property to send the user information to the client
console.log(req.auth);
res.send({
status: 200,
message: 'User information retrieved successfully! ,
data: req.auth// the user information to be sent to the client
})
})
Error message
Use the white screen of the web page packaged by vite, and the console reports an error.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.
reason
MIME type errors are generally a problem with native windows development. I encountered this after opening it with Python’s built-in http.server on Windows.
Solution
Deploy the packaged files in a formal server environment (such as nginx and Apache)
vue项目 CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory 修改页面后自动运行报错退出
Vue project: as soon as the page is modified, the automatic operation will report an error and exit (fat error: call_and_retry_last allocation failed – Javascript heap out of memory)
Solution:
step 1: NPM install -g increase memory limit
step 2: increase memory limit
Step 3: Run the project normally, if an error is reported (“node –max-old-space-size=10240″‘ is not an internal or external command, and is not a runnable program)
step 4: Look in the .bin file under node_module and replace “%_prog%” with %_prog% (without the quotes).
step 5: Run the Project normally.
[vue warn]: invalid prop: type check failed for prop “index”. Expected string, got undefined
there will be such an error when writing the backend. We just need to do the following
Solution:
Index is not converted to string type, so + ” is OK
Vue item startup error getaddrinfo enotfound xxx
startup item error
Solution:
open the hosts file (Windows) path as follows:
c:\windows\system32\drivers\etc
Just add the path that error reported.
VUE Error: listen EADDRNOTAVAIL: address not available
vue Project npm run dev Error: Error: listen EADDRNOTAVAIL: address not available … 
Cause: the configured IP address is incorrect.
Solution: open the config folder and find index.js file, modify the value of host to localhost , as shown in the following figure
vue Project Error: react lazy eslint error Parsing error: Unexpected token import
1. You need to install the extension component eslint, and then click settings in settings – extension search – eslintrc and add this line (“parser”: “Babel-eslint”) in settings.json, save the code, and then run the project
SyntaxError: Cannot use import statement outside a module
Error report when executing esmodule:
Problem Cause and Solution: To import the esmodule file, you need to change the file suffix js to mjs, if you do not want to change the suffix name, you need to configure the package.json file as follows.
