VUE工作中常见问题汇总及解决方案

npm篇

npm安装依赖报错：permission denied，错误信息大致如下：

npm ERR! Darwin 15.6.0 npm ERR! argv npm ERR! node npm ERR! npm npm ERR! path npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall mkdir npm ERR! Error: EACCES: permission denied, mkdir npm ERR! at Error (native) npm ERR! { Error: EACCES: permission denied, mkdir npm ERR! at Error (native) npm ERR! errno: -13, 

关键错误信息：Error: EACCES: permission denied, 解决办法：

// win 管理员身份运行cmd再npm命令 // mac 全局要加sudo sudo npm install ....

npm install 报错chromedriver 记录，错误信息如下：

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.34.1 install: `node install.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the chromedriver@2.34.1 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

该问题是vue-cli脚手架的一个bug，解决办法：

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

roadhog篇

roadhog 定义多于一个/分割符的路由匹配时报错，错误信息如下：

Unhandled Rejection (Error): Loading chunk 3 failed. HTMLScriptElement.onScriptComplete internal:/webpack/bootstrap df2d9286a38225b2cb63:756 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

解决办法：在.webpackrc 或 .roadhogrc 添加 "publicPath": "/"。

roadhog 下 .webpackrc 或者 .webpackrc.js、.roadhogrc 或者 .roadhogrc.js 配置项出错，错误信息如下：

Build failed: Cannot read property 'validate' of undefined TypeError: Cannot read property 'validate' of undefined at forEach.key (/Users/apple/jobs/reacts/react-antd-dva/node_modules/af-webpack/lib/getUserConfig/index.js:147:16) at Array.forEach (<anonymous>) at getUserConfig (/Users/apple/jobs/reacts/react-antd-dva/node_modules/af-webpack/lib/getUserConfig/index.js:131:30) at /Users/apple/jobs/reacts/react-antd-dva/node_modules/roadhog/lib/build.js:41:49 at new Promise (<anonymous>) at new F (/Users/apple/jobs/reacts/react-antd-dva/node_modules/core-js/library/modules/_export.js:35:28) at _default (/Users/apple/jobs/reacts/react-antd-dva/node_modules/roadhog/lib/build.js:34:10) at Object.<anonymous> (/Users/apple/jobs/reacts/react-antd-dva/node_modules/roadhog/lib/scripts/build.js:9:20) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Function.Module.runMain (module.js:684:10) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3 [graceful-process#10592] exit with code:0

解决办法：查看roadhog文档，确认配置项的正确性！尤其是从roadhog1.0升级到2.0很多配置项的变化！具体参考roadhog文档。

git篇

使用.gitkeep来追踪空的文件夹

解决办法：Git会忽略空的文件夹。如果你想版本控制包括空文件夹，根据惯例会在空文件夹下放置.gitkeep文件。其实对文件名没有特定的要求。一旦一个空文件夹下有文件后，这个文件夹就会在版本控制范围内。

当用git命令拉取最新代码时，有时会遇到如下的提示， Found a swap file by the name “.git/.MERGE_MSG.swp”

在项目根目录（如/StudioProjects/demo/Leave）下，找到.git/.MERGE_MSG.swp这个文件删除即可。 注：mac 删除命令rm -rf .MERGE_MSG.swp

eslint

Do not use 'new' for side effects

代码如下：

new Vue({ el: '#app', router, template: '<App/>', components: { App } })

报错：

原因：刪除了以下注释。这句注释可以绕过规则检测：

/* eslint-disable no-new */

在new Vue()上方加上句注釋即可：

/* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })

vue-cli构建的项目，eslint一直报CRLF/LF的linebreak错误

如题，vue在构建项目的时候选择了airbnb规则，同时项目构建后被windows的unix bash工具pull并且push过，这之后在windows上进行开发，就开始一直报

Expected linebreaks to be 'CRLF' but found 'LF'

这样的错误，后经查是一种强制统一方式，并且解决方法是

linebreak-style: ["error", "windows"]

强制使用windows方式，我将之添加到了项目根目录下的 .eslintrc.js 文件中的rule字段下：

// add your custom rules here 'rules': { // don't require .vue extension when importing 'import/extensions': ['error', 'always', { 'js': 'never', 'vue': 'never' }], // allow optionalDependencies 'import/no-extraneous-dependencies': ['error', { 'optionalDependencies': ['test/unit/index.js'] }], // try to fix the line break problem 'linebreak-style': ["error", "windows"], // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }

结果无效，现有问题二个：

1、是否是因为系统环境不同而造成了某种强制转换才会引发如上的错误？ 2、如何选择性的关闭eslint某个功能（linebreak检查）？ 

问题1

不同的操作系统下，甚至是不同编辑器，不同工具处理过的文件可能都会导致换行符的改变。

问题2

项目根目录下有.eslintrc.js文件，在配置文件中修改rule配置项，如下：

```javascript
// 统一换行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默认unix // off或0: 禁用规则 'linebreak-style': 'off' ```

nuxt篇

错误信息："TypeError: Nuxt is not a constructor" - when trying to use nuxt.js as a middleware

当我比着官方文档https://zh.nuxtjs.org/api/con...，发生了如下错误：

const nuxt = new Nuxt(config) ^ TypeError: Nuxt is not a constructor

解决办法：

 

const { Nuxt, Builder } = require('nuxt') // Import and set nuxt.js options let config = require('./nuxt.config.js') config.dev = (process.env.NODE_ENV !== 'production') let nuxt = new Nuxt(config) // Start build process (only in development) if (config.dev) { new Builder(nuxt).build() }