• 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
    // 统一换行符,"
    " unix(for LF) and "
    " 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()
    }
  • 相关阅读:
    【转载】Altium Designer多图纸功能
    【原创】使用Ultra Librarian为Altium Designer 09生成元器件库
    【笔记】niosII与win7兼容性解决方法
    【转载】关于FSM
    【原创】在仿真中如何使用好parameter?
    【转载】 $dispaly()、$strobe()、$monitor() 、$fwrite()與blocking / nonblocking的關係
    【转载】使用Debussy+ModelSim快速查看前仿真波形
    将博客搬至CSDN
    perl 替换一例
    linux shell常用快捷键(转载)
  • 原文地址:https://www.cnblogs.com/yc-braveheart/p/8490254.html
Copyright © 2020-2023  润新知