升级到vue-cli-4后，相对路径在标准导入中不再有效

Question

这是另一个拖延升级构建工具的案例，因为每次升级时，我都会发现有太多的更改需要完成。

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

找不到此依赖项：

@/ ./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

找不到以下相关模块：

./src/component/icons/index.js中的./Icon.vue

../../renderers/ ./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创建了这个文件，所以谁知道呢。

现在，我将尝试跟踪这个突破性的变化。因此，如果有任何人遇到类似的情况，请确保实际文件夹中的文件名完全匹配。