Install element normally
Just enter
vue add element
However, the following errors may occur:
If the error report shows that it is a node-sass problem, change the second option to no, that is, do not introduce the SCSS of element
Perfect solution
But remember to add the following code to the main file later:
import ‘element-ui/lib/theme-chalk/display.css’
It is to directly introduce the CSS of the element
introduction:
Recently, after upgrading the nodejs version to v18.7.0, the project report digital envelope routes::unsupported was launched. After many searches, the solution was finally found.
reason:
node.js version problem
Because of the recent release of OpenSSL 3.0 in node.js V17, OpenSSL 3.0 adds strict restrictions on allowed algorithms and key sizes, which may have some impact on the ecosystem. Therefore, previous projects will report an error after upgrading the nodejs version
Solution:
Method 1:
export NODE_OPTIONS=--openssl-legacy-provider
Method 2:
Modify package.json, add set NODE_OPTIONS=–openssl-legacy-provider before the relevant build command
"scripts": {
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},Parsing error: No Babel config file detected for XXX
In projects created with Vue scaffolding, the first line of each file in the project will have a red wavy line.
Solution:
find the package.json file in the project file, add "requireConfigFile": false in parserOptions, and you can solve the problem of red wavy lines.
"parserOptions": {
"parser": "@babel/eslint-parser",
"requireConfigFile":false
},Through the above operations, the problem can be solved!
Error Messages:
ERROR in [eslint] ESLint is not a constructorERROR in Error: Child compilation failed:
[eslint] ESLint is not a constructor
Solution: Turn off eslint validation at save time
(1) Add the following codes in [vue.config.js]: lintOnSave: false
(2) Then restartnpm run serve, successfully!
Error: error:0308010C:digital envelope routines::unsupported
npm run serve error: error:0308010C
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:471:10)
at D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:503:5
Solution:
set NODE_OPTIONS=–openssl-legacy-provider
D:\Item\springboot\vue>set NODE_OPTIONS=--openssl-legacy-provider
D:\Item\springboot\vue>npm run serve
> [email protected] serve
> vue-cli-service serve
It can run successfully
The main reason is the incompatibility of versions
Error Messages:
Syntax Error: Error: PostCSS received undefined instead of CSS string
Solution:
Excute the command: npm install sass-loader, and then npm run serve will be OK!
While developing a Vue.js 3.0 project using the vite tool, a configuration issue caused the project to run with the following error message:
16:17:27 [vite] page reload main.js
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
16:17:28 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
File: /home/projects/vitejs-vite-der4uu/App.vueWe need to install the plug-in @@vitejs/plugin-vue that uses error prompts.
The solution steps are as follows:
1. Install dependent plug-ins first
npm install @vitejs/plugin-vue -D2. Then configure the vite project configuration file: vite.config.js
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
});
In this way, we have configured the vite project to recognize the ability to parse single-file components with a .vue suffix.
3. Rerun
npm run devThis is the problem. It is solved perfectly.
How to Solve error: Module build failed TypeError this.getOptions is not a function at Object.loader
Solution: Reduce the current style-loader version
npm install -save -dev [email protected] npm install -save -dev [email protected] npm install --save-dev [email protected] less
Running the compile command after upgrading vueCli 4.x to 5.x may result in the following error:
ERROR ValidationError: Progress Plugin Invalid Options
options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOfThis may be caused by the inconsistency between the locally installed version of webpack and the version of vue-cli.
Solution:
1. Check if the webpack version in node_modules is also upgraded to version 5.x. If not, upgrade to version 5.x.
2. Check if the devServer in vue.config.js has overlay configuration, this configuration will be incompatible in vue-cli 5.x version, you have to remove it, otherwise it will also report an error when running
3. delete the wrong node_modules and package-lock.json
4. Clear npm cache: npm cache clean –force
5. reinstall the dependencies: npm install
In Vue projects, you need to reference third-party libraries, such as vant@^2.12.47. When using the dialog popup component, you need to use v-model:show to determine whether to display the popup.
When the project is running, an error will be reported: error ‘v-model’ directives require no argument vue/valid-v-model
Solution: Add:'vue/valid-v-model':'off' in the root directory, .eslintrc.js file.
As shown in the figure:
Start the error report after packaging with electron-builder:
Reading /xxx/manifest.json failed.
Error: ENOENT: no such file or directory, open '/xxx/manifest.json'
at Object.fs.openSync (fs.js:558:18)
at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
at Object.fs.readFileSync (fs.js:468:33)
at Object.fs.readFileSync (ELECTRON_ASAR.js:506:29)
at getManifestFromPath (/xxx/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:34:26)
at Function.BrowserWindow.addDevToolsExtension (/xxx/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:373:22)
at App.Z.enabled.X.on (/xxx/webpack:/~/electron-debug/index.js:78:1)
at emitTwo (events.js:111:20)
at App.emit (events.js:191:7)
Solution:
1. Execute the following command:
npm install vue-devtools --global
2. Modify src/main/index.dev.js as follows:
import { BrowserWindow } from 'electron'; //Add
/* eslint-disable */
// Install `electron-debug` with `devtron`
// require('electron-debug')({ showDevTools: true })
require('electron-debug')() //Modify
// Install `vue-devtools`
require('electron').app.on('ready', () => {
let installExtension = require('electron-devtools-installer')
//Comment out
// installExtension.default(installExtension.VUEJS_DEVTOOLS)
// .then(() => {})
// .catch(err => {
// console.log('Unable to install `vue-devtools`: \n', err)
// })
//Add
BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')
})
// Require `main` process to boot app
require('./index')
3. Recompile:
npm run build:win32
4. Repackage:
electron-builder
It can start normally:
Error reporting information
ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true& Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent’)
Delete the NumberInfo folder under the components folder, start the project again, and after starting, Ctrl + z to withdraw the deleted NumberInfo component folder, after which the project will start normally
Solution:
1. Delete, yarn run serve to start project
2. Withdrawal
3. Project started successfully
