Install vue scaffolding a command an error, tossed a day, and finally found a solution.
1. Find the .npmrc file in the file directory C:\Users and delete it (you can open the .npmrc file to see, the contents of which are set by yourself can be safely deleted)
2. Execute the project name created by vue create, the following figure appears is created successfully
ERROR Error: [copy-webpack-plugin] patterns must be an array
When installing mars3d, you need to install the copy webpack plugin plug-in
and then configure it in vue.config.js report an error: Error: error: [copy webpack plugin] patterns must be an array
the current node version is 12.2.0
const plugins = [
// Identifies the home directory where cesium resources are located, which is needed for resource loading, multithreading, etc. inside cesium
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
}),
// Cesium-related resource directories need to be copied to the system directory (some CopyWebpackPlugin versions may not have patterns in their syntax)
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
]
})
];
new CopyWebpackPlugin is changed as follows:
const plugins = [
// Identifies the home directory where cesium resources are located, which is needed for resource loading, multithreading, etc. within cesium
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
}),
new CopyWebpackPlugin([
{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
])
];
Run successfully
Background
After introducing the ecarts plug-in into the Vue project, the following errors are found:
[Vue warn]: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)”
The way to import components is: Import on demand
// import echarts
import echarts from 'echarts';
export default {
name:"",
mounted() {
// Initialize echarts instance
let lineCharts = echarts.init(this.$refs.charts);//On-demand introduction
}Solution:
Change the introduction method
import * as echarts from 'echarts';According to Arco design tutorial on the official website
Load components on demand by manual import
Solution:
Change the official website example to the following. The exclude array is the component name without CSS. If you are not clear about the component name, you can print console.log of the resolveStyle function:
createStyleImportPlugin({
libs: [
{
libraryName: '@arco-design/web-vue',
esModule: true,
resolveStyle: (name) => {
const exclude = ['menu-item']
if (exclude.includes(name)) return ''
// css
return `@arco-design/web-vue/es/${name}/style/css.js`
},
},
],
}),Error message
[vite] Internal server error: Failed to resolve import "D:/Programing/WebstormProjects/cow-Low-code/node_modules/@arco-design/web-vue/es/menu-item/style/css.js" from "src\views\HomeView.vue". Does the file exist?
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!
[Solved] Vue Error: Error in v-on handler (Promise/async): “[object object]“
Solution:
Use try_ catch package async… await function
/**
* export
*/
async download () { // export
try {
const { parkName } = this.formInline
const res:any = await exportInvoice({ parkName })
this.downSteam(res)
} catch (_) {}
}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!
lazyLoad of routing components, lazy loading problem, when using the lazy function of react in conjunction with the import() function to dynamically load routing components.
import React, { Component, lazy } from 'react'
·······
const Login = lazy(()=>import('XXXX'))The following errors will be reported:
Error analysis: suspended=> When the network speed is slow and the specified routing component page is not loaded, you need to use the fallback in suspend to load the contents of the fallback before the specified page appears.
Solution:
import React, { Component, lazy,Suspense } from 'react'
·····
const Home = lazy(()=> import('./Home'))
const About = lazy(()=> import('./About'))
·······
<Suspense fallback={<h2>Loading..</h2>}>
<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
</Suspense>