时间戳

首页 > 解决方案 > Vue cli 3项目别名src到@或~/不起作用

javascript - Vue cli 3项目别名src到@或~/不起作用

问题描述

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

import Component from '../../../../components/folder/Component.vue'

我只想给 src 文件夹起别名并执行

import Component from '@components/folder/Component.vue'

我确实读过我必须修改vue.config.js，我已经完成了，但错误是一样的

Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'

这是我的 vue.config.js

  const path = require("path");

  const vueSrc = "./src";

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

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

标签： javascriptvue.jswebpackvue-cli-3

解决方案

完整的例子：

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

我有一种感觉，缺少/. 因此，@components/Permissions/PermissionsTable应该是@/components/Permissions/PermissionsTable因为您没有/在vueSrc. 所以 webpack 会./src像这样附加它：./srccomponents/Permissions/PermissionsTable.

推荐阅读