The four front-end bug s in the recent personal learning process are only personal records. Please be careful for reference!
catalogue
Bug ['Vue cli service' is not an internal or external command, nor is it a runnable program]
bug [ npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue@0.1.0 serve: `vue-cli-service ]
bug [ This relative module was not found: * ./xxx.vue in ./node_modules/xxx/xxx/xxx/xxx/xxx/xxx ]
bug [ @multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js ]
Method 1: run cmd command line
npm install babel-plugin-transform-vue-jsx --save-dev
But it still doesn't work for me, so I have the following methods.
Method 2:
webpack.base.conf.js find the plug-in configured (referenced) but not installed. Just comment it out.
Original file name babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
Change to Babel config. The code in JS should also be added with module Exports and then run:
module.exports = {
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
. babelrc and Babel config. The same configuration of JS cannot be merged
babel's configuration file is already in the project config. js
module.exports = {
presets: ["@vue/app"],
};Then, due to the introduction of element UI on demand, Babel plugin component is used and configured The babelrc file is as follows (of course, babel7 is involved. You should install it @babel/preset-env , the old babel-perset-es2015 is no longer supported in Babel 7)
{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}Then it was found that the on-demand introduction of element UI in the page did not take effect because the configuration could not be merged The configuration of babelrc file does not take effect at all. The solution is to put the configuration in the same file
Remember to delete another file (babel.config.js) and keep only one configuration file (. babelrc).
{
"presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}So far, the problem is solved.
Bug ['Vue cli service' is not an internal or external command, nor is it a runnable program]
'Vue cli service' in npm run dev is neither an internal or external command nor a runnable program:
'vue-cli-service' It is not an internal or external command, nor is it a runnable program Or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-element-admin@4.2.1 dev: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-element-admin@4.2.1 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! D:\Node\node_cache\_logs\2020-08-17T01_42_07_249Z-debug.log
Solution: delete node_modules and then re npm install: either on node The Vue cli scaffold is not installed in JS, or there is a problem with the project environment configuration, and the scaffold is not loaded and called;
Enter node JS configuration environment to check whether Vue cli is successfully installed. For example, configure the path (my D:\Program Files, node \ node_global \ node)_ modules@vue \CLI), it is found that my scaffold has been installed successfully. If not, install it from the command line. Scaffold installation command:
npm install -g @vue/cli
Therefore, it can be found that the problem is that our configuration file is not loaded or called to the scaffold. Just import the installed scaffold in the configuration file:
So far, the problem is solved.
bug [ npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue@0.1.0 serve: `vue-cli-service ]
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue@0.1.0 serve: vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-sell@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
terms of settlement
1 - find the project file and delete the node in the file_ Modules file deletion
2 - re input in the control terminal
sudo npm install
Install image:
npm install -g cnpm --registry=https://registry.npm.taobao.org
bug [ This relative module was not found: * ./xxx.vue in ./node_modules/xxx/xxx/xxx/xxx/xxx/xxx ]
bug logs similar to the following are often encountered:
ERROR Failed to compile with 1 errors11:30:22 This relative module was not found: * ./xxx.vue in ./node_modules/xxx/xxx/xxx/xxx/xxx/xxx
Reason 1:
Statement error, path or component writing error, which is indicated here as XXX Vue module not found, page xxx not found Vue, just check the configuration according to the path in the log (generally, there is a problem with the import statement in < script >).
Reason 2:
When we use IDE tools (such as VSCode) to open the front-end project, we open the upper layer of the project file (this problem may occur during compression and packaging), and this error will be reported when running npm run dev. It is possible that after changing the file directory or file name, the editor will modify some paths that are considered to be associated. The solution is to delete the outermost node_modules file and package lock JSON file, delete it, reinstall NPM and run npm run dev. Once the problem is solved, the project can run normally.