The project uses the create react app scaffold to build
before configuring the local proxy, the following
the following projects need to proxy HTTPS, configure the proxy to report an error of 500, and respond to error occurred while trying to proxy to:
find and reconfigure, and add changeorigin: true
proxy: {
'/cas': {
target: 'https://**.**.**.**:30090',
secure: false,
changeOrigin: true,
pathRewrite: { "": "" }
},
},```
Almost all online tutorials are directly connected to micro applications in the home page, which is in the default of layout Vue is labeled with container, and other reference official websites are OK. However, if the sub route is embedded as a page, the first page can be loaded successfully. When you go back and enter the sub route, you will report an error that the micro page cannot be mounted
Target container with #subapp-viewport not existed while sub-vue mounting!After searching the Internet for a long time, I found this sentence on the official website:
How to load micro applications on a routing page of the main application
It must be ensured that the routing page of the main application is also loaded when the micro application is loaded.
There is a problem with the sub routing of nuxt. Qiankun listens to the change of URL to load micro applications, and nuxt is the same, and the page generated by nuxt is slower than that of Qiankun. Therefore, when Qiankun loads the micro page, the container tag is not generated.
Many methods have been tried to solve the problem in an elegant way, but they can’t. finally, the same solution that nuxt also reports an error when there is no change in the jump route address is adopted. A bridging page is added between the jump page and the target page. The layout of the bridging page is the same as that of the target page, so that the label of the container is loaded. Because the bridging page and the target are the same layout, The container tag is not lost.
The code is as follows:
<template>
<div>
</div>
</template>
<script>
/**
* qiankun bridge, qiankun listen to url changes to load the sub-application, but nuxt is also, can qiankun in advance, will lead to the layout in the container tag has not been loaded, the micro application can not be injected.
* Use this bridge to load the layout, and container tags in advance.
*/
export default {
name:'Bridge',
layout:'subapp',
created(){
this.$router.replace(this.$route.query.to)
}
}
</script>
The jump event of the jump page (home page) is changed to:
goto(item){
this.$router.push('/subapp/bridge?to='+this.appid)
}Appid is the name of the micro application.
The error report is shown in the figure:
Solution:
In package Execute the NPM run start command under the JSON folder
Its tip is to avoid redundant navigation to the current location. Simply put, the same route is triggered repeatedly.
The solution is as follows:
in the router folder, click index Add these lines of code to the JS file:
const originalPush = Router.prototype.push
//Error Messages: NavigationDuplicated: Avoided redundant navigation to current location
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
The detailed location is as follows:
However, he uses vuerouter instead of router. I don’t know if it’s the Vue router version.
Today, when the front-end uses Vue to transfer files with formdata, the background node reports an error
Multipart: Boundary not found multer
It is found in the front console that the file file transmitted by the interface is null {}, because it is set when Axios requests
the Header of Content-Type is multipart/form-data
It is found that there is no boundary parameter later, except multipart/form data
multipart/form-data；boundary :****************
There should also be a series of boundary parameters. First of all, do not splice the contents behind the boundary, otherwise you need to reconfigure all the content parameters yourself.
later, it is found that it is the reason for the request method, and you need to use ajax to make the request.
the solution is as follows
// upload the files
export function reqUploadImg(file, user_id) {
return axios({
url: '/uploadImg',
method: 'POST',
Headers: {
"content-type": "multipart/form-data",
},
data: file,
params: { user_id }
})
}
This problem can be solved. It will automatically splice a string later, or “content type”: “multipart/form-data” in “multipart/form-data” will also be spliced automatically if it is set to fasle, but after personal experiments, it is found that the types have changed into JSON format, which is automatically generated by Axios source code
Requirement: click the corresponding button to highlight
Error code:
Demo is the style class name corresponding to the highlight
<NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink>Error message:
It is said that react does not recognize the activeclassname attribute of the small hump writing method. It is recommended to change it to lowercase. After changing it to lowercase activeclassname, no error will be reported, but the style does not take effect.
Later, I found out that my react router DOM version is the latest version: 6.0 2：
In the new version, the active classname attribute is no longer used to highlight naclink. Instead, it is implemented directly in the classname as a callback function.
Change to the following code:
<NavLink className={({isActive}) => 'list-group-item' + (isActive ?' demo' : '')} to="/about">About</NavLink>
<NavLink className={({isActive}) => 'list-group-item' + (isActive ?' demo' : '')} to="/home">Home</NavLink>Note: a space should be added before “demo”. Otherwise, when clicking the button to trigger the active state, it will return to “list group itemdemo” (string splicing, if no space is added, the front and rear class names will be connected together), resulting in the ineffective CSS style.
Mongodb suddenly reported an error, the foreground could not get the data, and the mongodb software could not be opened
node:22368) UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017
at NativeConnection.Connection.openUri (D:\HBuilder work place\huaRui\2.0\serve\node_modules\mongoose\lib\connection.js:797:32)Solution: Task Manager — Service — mongodb — Open
[error]
node the command failed to start the project and reported an error: “unknown database ‘mydb'”
[other features]
at this time, view phpstudy and display “port occupied”.
[solution]
Start Run CMD, enter netstat - ano , look at the first column, followed by the port, find 3306, and remember the corresponding PID
Then open the task manager to view -> Select column -> Tick PID (process identifier) -> determine
Find the PID process in the task manager, check what program occupies the port, and close it
If you restart MySQL again, you will not report the error that the port is occupied. ⑤ use postman to test whether the background project interface is normal
Note: the “modal” component has been registered but not used
The modal component is registered but not used.
This is due to the strict syntax of eslint
find rules in eslintrc.js file. and Add "vue/no-unused-components": "off" to save 
1. Phenomenon
It has always been normal. Suddenly one day, an error is reported when packing. The key information is as follows:
ineffective mark compacts near heap limit allocation failed - Javascript heap out of memory
the details are as follows:
2. Solution
All kinds of data say that node memory overflow , and solutions are also given,
for example: – max_old_space_Size = 4096 and so on, but it doesn’t work for me. (if you refer to mine, it doesn’t work, you can look at the other methods mentioned above)
later, I saw a solution, which worked
1, CMD Global install increase memory limit
NPM install -g increase memory limit
2, CD enter the project directory and execute:
increase memory limit
3. Repack
NPM run build
Record errors every day
Recently, I took over a nuxtjs project, which was the secondary development bought by the company. I had a little side dishes and played a little foolishly, but it was solved.
When the project was to be delivered online two days ago, I found that I reported an error when running NPM run generate to package, but running build and dev were normal. The whole face was confused. I didn’t find a similar problem in Baidu for a long time. Then I had to go to the official problem of GitHub. It was all English, which made me feel numb. Finally, I really found that when generating applications, I will jump into the virtual Linux machine to obtain dist, that is, this problem may occur in the windows system, and then the Linux system obtains the path. Different from windows, it needs to standardize the path. The error is in the node_modules@nuxt\cli\dist\cli-generate.js
export async function snapshot ({ globbyOptions, ignore, rootDir }) {
const snapshot = {}
const files = await globby('**/*.*', {
...globbyOptions,
ignore,
cwd: rootDir,
absolute: true
})Change cwd ：rootDir to cwd : upath . normalize ( rootDir ).
const files = await globby__default [ 'default' ] ( '**/*.*' , {
... globbyOptions ,
ignore ,
cwd : upath . normalize ( rootDir ) ,
absolute : true
} ) ;An error is reported in the request. The provisioning headers are shown. The MAC browser automatically converts HTTP to HTTPS
Remember the steps to solve the problem
1 Address field input: chrome://net-internals/#hsts
2. Scroll to the bottom to find delete domain security policies, enter the web address and click delete
