升级到 vue-cli-4 后，相对路径不再适用于标准导入

Question

这是另一个拖延升级我的构建工具的案例，因为每次我这样做，我都会发现我必须完成大量的更改。

我使用 vue cli 4.5 创建了一个新项目，并加载了它，就像一个全新的新项目一样。然后我复制了新项目的依赖项、配置文件等。我删除了 node_modules，甚至删除了包锁，运行 npm install 然后是 npm run serve 和我在网上看到了奇怪的缓存错误，但对我没有任何帮助。

未找到此依赖项：

@/components/renderers/Loader 在./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0 -0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/grids/shared.vue?vue&type=script&lang=js&

要安装它，你可以运行: npm install --save @/components/renderers/Loader

未找到这些相关模块：

./Icon.vue 在./src/components/icons/index.js

../../renderers/Loader 在 ./node_modules/cache-loader/dist/cjs.js??ref--12-

等等等等

这是我的 package.json

{ 
  "name": "myapp",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Me",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.3.0",
    "vuex": "^3.4.0",
    "sass-loader": "^9.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

这是我的 vue.config.js

module.exports = {


  publicPath: process.env.NODE_ENV === 'production' ? '/AppFolder/dist/' : 'http://localhost:8080/dist/',
  runtimeCompiler: true,  
  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== 'production'
  },
  devServer: {
    headers: { "Access-Control-Allow-Origin": "*" },
    port: 8080,
    disableHostCheck: true,
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

然后尝试删除我的 vue.config.js...

和babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

之前一切正常。开箱即用的应用程序没有亲戚或别名（即@）的问题。

这里有点糊涂！

Answer 1

似乎在花了几个小时试图找出问题之后，我在 SO 上发帖后找到了答案。

我不知道如何或为什么，但在我的 IDE (Visual Studio) 中，大小写与实际文件系统不同。我通过 IDE 创建了文件所以谁知道呢。

现在我将尝试追踪这一重大变化。所以任何遇到类似问题的人，请确保实际文件夹中的文件名完全匹配。

升级到 vue-cli-4 后，相对路径不再适用于标准导入

After upgrading to vue-cli-4, relative paths no longer work in standard imports

node.js

webpack

vue.js

vuejs2

vue-cli-4