使用vue-cli3建立專案，踩坑記錄

reahink發表於2019-03-11
Vue

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"
複製程式碼

10.17

這個原因找了半天，都沒找到。最後鬼使神差的發現原來是專案的路徑太深導致的。真是太過奇葩！

相關文章