After the project is built with Vue/cli, the above error will be reported after startup. The following methods can be used to avoid error reporting:
In the SRC directory, create a vue.config.js file, write the following code in the file, and then restart NPM run serve
module.exports = {
lintOnSave:false
}There was a problem installing postcss pxtorem
Solve the problem of installing the postcss pxtorem plug-in in Vue and reporting an error “error: postcss plugin postcss pxtorem requires postcss 8.”
solve:
Upgrade postcss version or downgrade postcss pxtorem version
npm i [email protected]
When writing a Vue project, the project does not report an error, but the Vue file will display an error semi colon expected CSS (CSS semicolonexpected)
solution:
change the file type in the lower right corner from HTML to Vue
reason:
The await keyword is only valid in async function. If you use await outside the async function, you will only get a syntax error.
Modified code
this.$refs.formRef.validate(async (varlid) => {
if (!varlid) return
const result = await this.$http.post('login', this.loginForm)
console.log(result)
The problem of error in v-on handler: “referenceerror: XXX is not defined” may occur during Vue compilation,
this may be because you do not reference the corresponding component, and the JS method of Vue reports an error,
after reference
Problem background:
Similar to the figure below, the label is clearly closed, but still red.
solve the problem:
In fact, there are no errors in the code. For example, after using the element UI or iView framework, you will find that some parts of vs code will automatically mark red wavy lines,
In fact, it is a syntax check problem for vuter. You only need to add it in setting.json
“vetur.validation.template”: false
Setting method:
Create xxx.vue file with vscode, add comments and report error
Create a. Vue file
When we use vscode to create. Vue files, we need to install relevant plug-ins that support Vue, such as vetur
Problem Description:
After installing vscode, you do not want to use the default IE browser. You want to specify chrome or Firefox, but install the plug-in lever server or other browser plug-ins. When specifying the default browser, windows reports an error and cannot find chrome or Firefox
after reading many posted on the Internet, they are configured in settings.json. After personal practice, they have no effect. Later, after their own exploration, they found that the plug-in can’t find your chrome or Firefox. It’s not that you haven’t installed it on your computer, let alone on disk C; But because when a plug-in such as lever server specifies a browser, the windows system will find the installation directory of the software according to the system variables.
terms of settlement:
1. Open the control panel of the computer – & gt; System and security —– & gt; System
2. Open advanced system settings, click environment variables, system variables, and add a new variable named path: D: \ Kiki \ Mozilla Firefox
this directory is the directory where your Google or Firefox exe files are located
3. After configuring environment variables and saving, restart vscode
1、 A blank page appears and an error is reported
Scheme I:
1: The path of JS and CSS resources is incorrect
Solution: add assetspublicpath in config/index.js: ‘/’ Change to assetspublicpath: ‘. /’
2: Error in background image in CSS
Solution: add a line of code in build/utils.js publicPath:’../../’
Scheme 2: some people may create Vue basic projects through hbuilder. There are no files in scheme 1 in the directory. Then you can try the scheme at this time. It’s easy to use on my side. I’m not sure everyone is effective.
Solution: create the vue.config.js file in the project root directory
The contents of the document are as follows:
module.exports = {
publicPath : './'
}2、 Blank page, no resource error
At this time, the problem may be caused by the routing mode
history ：
The new pushstate () and replacestate () methods in HTML5 history interface are utilized. (specific browser support is required) these two methods are applied to the browser’s history stack. On the basis of the existing back, forward and go, they provide the function of modifying the history. Only when they perform modification, although the current URL is changed, the browser will not immediately send a request to the back end.
Solution:
The default route of Vue is hash mode. You can modify it to hash. Or directly comment out mode: ‘history’,
Conclusion: the above is the relevant information I know. If any boss knows other questions, you can leave a message and learn together.
1. The vscode editor adds a line of code import func from ‘./Vue temp/Vue editor bridge’; I didn’t introduce this thing, so I couldn’t find the reason
2. Downgrade prettier to 1.8.1 and vueter to 0.18.1 to successfully solve similar problems.
Error: listen eaddnotavail: address not available 192.168.43.149:8002 will appear when NPM run dev is running. This error is caused by the dynamic change of the local IP and the difference between the two IP addresses,
open the config folder, find the index.js file, and change the host: '192.168.43.149' to host: 'localhost', host: '192.168.219.149'
Encountered while developing Vue project Duplicate keys detected: ’13’. This may cause an update error. This error will not affect the page display, but will always be printed on the console. As shown in the figure
Error reason: the key value set during V-for loop is not unique. As shown in the figure
Solution
The key that sets the V-for loop is unique. As shown in the figure
