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=cdn./dist/chromedriver
roadhog篇
roadhog 定义多于⼀个/分割符的路由匹配时报错，错误信息如下：
Unhandled Rejection (Error): Loading chunk 3 failed. ScriptComplete internal:/
webpack/bootstrap df2d9286a38225b2cb63:756 This screen is visible only in development. It will not appear if the app crashes in production. 解决办法：在.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
react router 和vue router
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': v.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
当我⽐着官⽅⽂档，发⽣了如下错误：
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('./fig.js')
config.dev = (v.NODE_ENV !== 'production')
let nuxt = new Nuxt(config)
/
/ Start build process (only in development)
if (config.dev) {
new Builder(nuxt).build()
}