Vue cli 3 项目别名 src 到 @ 或 ~/不起作用 [英] Vue cli 3 project alias src to @ or ~/ not working

问题描述

我已经用 vue cli 3 安装了项目，但是随着项目的增长，组件的导入变得越来越难看，我最终导入了一个像

I have installed the project with vue cli 3 but as the project grows, the import on the components are getting ugly, i end up importing a component like

从'../../../../components/folder/Component.vue'导入组件

我只想给 src 文件夹取别名，然后做

i just want to alias the src folder and do

从'@components/folder/Component.vue'导入组件

我确实读到我必须修改 vue.config.js，我已经完成但错误是相同的

i did read that i have to modify the vue.config.js, i have done it but the error is the same

未找到模块:错误:无法解析@components/Permissions/PermissionsTable"

这是我的 vue.config.js

this is my vue.config.js

  const path = require("path");

  const vueSrc = "./src";

  module.exports = {
    runtimeCompiler: true,
    css: {
      modules: true
    },
    configureWebpack: {
      resolve: {
        alias: {
          "@": path.join(__dirname, vueSrc)
        }
      }
    }
  };

我错过了什么吗?我还应该做什么?

am i missing something? what else should i do?

推荐答案

完整示例:

const path = require("path");
const vueSrc = "./src";
module.exports = {
  runtimeCompiler: true,
  css: {
    modules: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, vueSrc)
      },
      extensions: ['.js', '.vue', '.json']
    }
  }
};

虽然我不确定扩展是否能解决您遇到的问题.如果您没有在导入定义中编写扩展，这只会添加扩展:https://webpack.js.org/configuration/resolve/#resolveextensions

Although I am not sure that extensions is the solution to the problem you had. This will just add the extensions in case you haven't written those in the import definition: https://webpack.js.org/configuration/resolve/#resolveextensions

我感觉这是缺少/的问题.所以应该是 @/components/Permissions/PermissionsTable 而不是 @components/Permissions/PermissionsTable 因为你没有在vueSrc 的结尾.所以 webpack 会像这样将它附加到 ./src 上:./srccomponents/Permissions/PermissionsTable.

I have a feeling it was rather a problem with the missing /. So instead of @components/Permissions/PermissionsTable it should have been @/components/Permissions/PermissionsTable because you did not add a / at the end of your vueSrc. So webpack will just attach it to ./src like this: ./srccomponents/Permissions/PermissionsTable.

这篇关于Vue cli 3 项目别名 src 到 @ 或 ~/不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！