Vue项目@符号导入失败：Vue-CLI正常但Vue-AdminLTE无法解析

Hey there! The @ alias you’re used to using in Vue CLI projects is actually a webpack configuration trick that maps @ directly to your project’s src/ directory. Vue CLI sets this up automatically when you spin up a new project, but cloned projects (like this AdminLTE one) might not have this pre-configured. Let’s walk through the most common fixes to get it working:

1. Check if the @ alias is configured in your project #

First, head to your project root and look for a vue.config.js file—this is where Vue CLI stores webpack overrides. If it exists, check for an alias setup like this:

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

Or if the project uses chainWebpack (another common way to configure webpack in Vue CLI):

const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'));
  }
};

If vue.config.js doesn’t exist at all, create it and add one of the above snippets to set up the alias manually.

2. Fix ESLint errors (if you’re seeing them) #

Even if webpack recognizes the alias, ESLint might still throw "unresolved path" errors. To fix this, open your .eslintrc.js file and add a resolver setting:

module.exports = {
  // ... other ESLint settings
  settings: {
    'import/resolver': {
      webpack: {
        config: 'vue.config.js' // Point to your webpack config file
      }
    }
  }
};

This tells ESLint to use your webpack config to resolve aliases like @, so it won’t flag valid imports anymore.

3. Restart your development server #

Any changes to webpack or ESLint configs won’t take effect until you stop and restart your dev server (e.g., stop npm run serve and run it again). This is a super common missed step—don’t skip it!

4. Double-check your file paths #

Make sure the path you’re importing actually exists under src/. For example, @/components/blablabla should map to src/components/blablabla.vue (or .js if it’s a plain module). Typos in folder/file names can cause resolution issues too, so give the path a quick once-over.

In short: Vue CLI does the alias setup for you out of the box, but cloned projects often skip this step. Adding the alias config to vue.config.js (and fixing ESLint if needed) should get @ working exactly like it does in your own projects.

内容的提问来源于stack exchange，提问作者Infinity