近期bug集锦

近期个人学习过程中关于前端的4个bug，仅做个人记录，参考请慎重！

bug [ @multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js ]

vue-cli-service'%20%E4%B8%8D%E6%98%AF%E5%86%85%E9%83%A8%E6%88%96%E5%A4%96%E9%83%A8%E5%91%BD%E4%BB%A4%EF%BC%8C%E4%B9%9F%E4%B8%8D%E6%98%AF%E5%8F%AF%E8%BF%90%E8%A1%8C%E7%9A%84%E7%A8%8B%E5%BA%8F%20%5D-toc" style="margin-left:80px;">bug [ 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 ]

vue%400.1.0%20serve%3A%20%60vue-cli-service%20%5D-toc" style="margin-left:80px;">bug [ npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue@0.1.0 serve: `vue-cli-service ]

vue%20in%20.%2Fnode_modules%2Fxxx%2Fxxx%2Fxxx%2Fxxx%2Fxxx%2Fxxx%20%5D-toc" style="margin-left:80px;">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 ]

方法1：cmd命令行运行

npm install babel-plugin-transform-vue-jsx --save-dev

可是对我来说还是不行，所以就有了以下方法。

方法2：

webpack.base.conf.js找到配置（引用）了但是没有安装的插件，注释掉即可。

原本的文件名 .babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

改成 babel.config.js 里面代码也要改加上module.exports 然后运行：

module.exports = {
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
  }

.babelrc和babel.config.js的相同配置不能合并

项目内部已经有了babel的配置文件babel.config.js

module.exports = {
  presets: ["@vue/app"],
};

然后由于要按需引入element-ui，就使用了babel-plugin-component，并且配置了.babelrc文件，如下（当然其中涉及到babel7，大家要安装@babel/preset-env,旧的babel-perset-es2015在babel7已经不支持了）

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后发现页面中element-ui的按需引入没有生效，原因是配置无法合并的问题，导致.babelrc文件的配置根本就没有生效，解决方法是把配置放到同一个文件中

记得删除另外一份文件（babel.config.js）只保留一个配置文件(.babelrc)。

{
  "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

至此问题解决。

vue-cli-service'%20%E4%B8%8D%E6%98%AF%E5%86%85%E9%83%A8%E6%88%96%E5%A4%96%E9%83%A8%E5%91%BD%E4%BB%A4%EF%BC%8C%E4%B9%9F%E4%B8%8D%E6%98%AF%E5%8F%AF%E8%BF%90%E8%A1%8C%E7%9A%84%E7%A8%8B%E5%BA%8F%20%5D">bug [ 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 ]

npm run dev 出现 ‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序：

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
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

解决办法：删掉 node_modules 然后重新npm install：要么在node.js中没有安装vue-cli脚手架，要么该项目环境配置有问题，没有加载调用到此脚手架；

进入node.js的配置环境查看vue-cli是否安装成功，比如去配置路径（我的是D:\Program Files、Node\node_global\node_modules@vue\cli），发现我的脚手架已经安装成功，如果没有的话，命令行进行安装即可，脚手架安装命令：

npm install -g @vue/cli

因此可以发现问题在于我们的配置文件，没有加载或调用到脚手架，在配置文件中对安装的脚手架进行引入即可：

至此问题解决。

vue%400.1.0%20serve%3A%20%60vue-cli-service%20%5D">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.

解决办法

1-找到项目文件，将文件中的node_modules文件删除
2-重新在控制端中输入

sudo npm install

安装镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue%20in%20.%2Fnode_modules%2Fxxx%2Fxxx%2Fxxx%2Fxxx%2Fxxx%2Fxxx%20%5D">bug [ This relative module was not found: * ./xxx.vue in ./node_modules/xxx/xxx/xxx/xxx/xxx/xxx ]

类似于如下的bug日志经常遇到：

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

原因一：

语句错误，路径或组件书写错误，这里指明是xxx.vue模块没有找到，没找到页面xxx.vue，按照日志中的路径去查看配置即可（一般是<script>中的import语句出了问题）。

原因二：

在我们使用IDE工具（比如VSCode）打开前端的项目时，打开了项目文件的上一层（压缩打包时可能会出现这个问题），运行npm run dev就会报这个错误。有可能是当更改了文件目录或者文件名后，编辑器会把一些认为有关联的路径也一并修改了。解决办法就是删除最外层的node_modules文件和package-lock.json文件，删除后重新npm install 并npm run dev运行。问题解决，项目即可正常运行。