工做中常見問題彙總及解決方案

注：本文是我在開發過程當中遇到問題及解決方法的總結，以後會持續更新，但願幫助到更多的學習者。文中有不妥的地方但願指出共同窗習，同時歡迎一塊兒補充。

VueJS 開發常見問題集錦

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
  }

結果無效，現有問題二個：

一、是不是由於系統環境不一樣而形成了某種強制轉換纔會引起如上的錯誤？
二、如何選擇性的關閉eslint某個功能（linebreak檢查）？

問題1

不一樣的操做系統下，甚至是不一樣編輯器，不一樣工具處理過的文件可能都會致使換行符的改變。

問題2

```

項目根目錄下有.eslintrc.js文件，在配置文件中修改rule配置項，以下：

// 統一換行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默認unix
// off或0: 禁用規則
'linebreak-style': 'off'

<h2>nuxt篇</h2>
<h3>錯誤信息："TypeError: Nuxt is not a constructor" - when trying to use nuxt.js as a middleware</h3>
<p>當我比着官方文檔<a href="https://zh.nuxtjs.org/api/configuration-dev%E5%86%99%E4%BB%A3%E7%A0%81%E6%97%B6" rel="nofollow noreferrer">https://zh.nuxtjs.org/api/con...</a>，發生了以下錯誤：</p>

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

<p><strong>解決辦法：</strong></p>

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()
}
```

原文地址：https://segmentfault.com/a/1190000012729790