使用vue-cli3创建项目，踩坑记录

[zqinmiao]

vue-cli3是个好东西，但是好东西也有不完美的地方。
在使用的过程中，遇到了一些莫名其妙或因姿势不对出现的error，在这里记录下来。也算是前人栽树，后人乘凉。

设置别名 alias 的注意事项

在根目录新建vue.config.js

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src")
      }
    }
  }
};

在App.vue文件中使用@别名

import HelloWorld from "@/components/HelloWorld";

编译后终端报错如下：

 ERROR  Failed to compile with 1 errors                                                                                                                                                                20:49:36

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: Missing file extension for "@/components/HelloWorld" (import/extensions) at src/App.vue:11:24:
   9 |
  10 | <script>
> 11 | import HelloWorld from "@/components/HelloWorld";

这是因为eslint-loader不能解析@的缘故

安装eslint-import-resolver-webpack并配置

yarn add eslint-import-resolver-webpack -D

在package.json或者.eslinttrc.js设置如下：

module.exports = {
  root: true,
  'settings': {
    "import/resolver": {
      "webpack": {
        "config": "node_modules/@vue/cli-service/webpack.config.js"
      }
    }
  }
}

至此即可解决上面的报错

---

eslint rule import/extensions引起的错误提示

import/extensions 介绍

当设置了如下规则时：

/* .eslinttrc.js */

module.exports = {
  root: true,
  'settings': {
    "import/resolver": {
      "webpack": {
        "config": "node_modules/@vue/cli-service/webpack.config.js"
      }
    }
  },
  rules: {
    'import/extensions': ['error', 'always', {
      'js': 'never',
      'vue': 'never'
    }]
  }
}

引入的文件出现错误提示(编辑器vscode)

开发环境：macOS Sierra 10.12.6

[eslint] Missing file extension for "@/components/HelloWorld"

这个原因找了半天，都没找到。最后鬼使神差的发现原来是项目的路径太深导致的。真是太过奇葩！

[zhangwei900808]

我设置之后还是报错啊，是我哪里写得不对吗

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'global-require': 0,
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
    'max-len': [2, { code: 200, tabWidth: 4, ignoreUrls: true }],
    'no-param-reassign': ['error', { props: false }],
    'prefer-destructuring': ['error', {
      array: true,
      object: true,
    }, {
      enforceForRenamedProperties: false,
    }],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: 'node_modules/@vue/cli-service/webpack.config.js',
      },
    },
  },
};

const path = require('path');

const resolve = dir => path.join(__dirname, dir);

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@$': resolve('src'),
      },
    },
  },
};

☁  vue-admin-template [master] ⚡ yarn run lint
yarn run v1.6.0
(node:1550) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ vue-cli-service lint
error: Missing file extension "vue" for "@/components/common/Master" (import/extensions) at src/views/test/Test.vue:70:24:
  68 | </template>
  69 | <script>
> 70 | import MasterPage from '@/components/common/Master';
     |                        ^
  71 |
  72 | export default {
  73 |   components: {

1 error found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[zqinmiao]

@zhangwei900808 你的别名设置的是：

'@$': resolve('src')

但是你引入组件的时候却是：

@/components/common/Master

应该是：

@$/components/common/Master

才对。

[fengcaian]

vue-cli3不会再去查找文件夹下的index.vue了，这个能不能配置引用组件的时候，组件文件下有index.vue,引用的时候因为文件夹名称就行了

[zqinmiao]

vue-cli3不会再去查找文件夹下的index.vue了，这个能不能配置引用组件的时候，组件文件下有index.vue,引用的时候因为文件夹名称就行了

@fengcaian 可以呀。比如文件夹如下：

引入我这样引入：

<template>
  <div id="app">
    <Test/>
  </div>
</template>

<script>
import Test from "@/components/test";

export default {
  name: "App",
  components: {
    Test
  }
};
</script>

一切正常。

[fengcaian]

很奇怪，我的一个用vue-cli2的项目升级到vuecli3后发现就不行了，必要要把路径写全了才可以