This has been happening for a long time.

A few days ago, the team member complains that the vuE-cli4 alias configuration does not work, the reference module must use the default ‘@’ alias, directly using the module name configuration does not work, as shown in the following example.

Import config from 'config'; // Import config from '@/config';Copy the code

When the module path is very long, the developer students write like crazy and can’t stand it.

Webpack is ok, cli3 is ok, cli4 is ok, node_modules is not ok.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Today, I sorted out and optimized the code. When I thought about it, I felt that it was not impossible, unbelievable and unreasonable. There must be something wrong, and the configuration did not take effect due to the wrong way of use.

Check the ‘vue.config.js’ file and configure the alias section as follows:

config.resolve.alias .set('@', resolve('src')) .set('api', resolve('src/api')) .set('assets', Resolve (' SRC /assets')).set('config', resolve(' SRC /assets')) Config directory.set('utils', resolve(' SRC /utils')).set('store', resolve(' SRC /store')).set('types', resolve('src/types')) .end()Copy the code

Use as follows:

import {config} from 'config/chart';
Copy the code

It’s nice to get a reminder like this:

Cannot find module 'config/chart' or its corresponding type declarations.Vetur(2307)
Copy the code

Took out the user’s manual, turned over several times, completely correct, no problem ah.

Try restarting the service by executing the ‘NPM run serve’ command.

It doesn’t help.

Oh, look at the source, that alias @ all work, this does not make sense, enmmm, very young, very easy, the road ahead, although the road ahead is too sad, please bless me in a smile.

Fortunately, I’m familiar with Webpack.

The good news is that vscode has powerful search capabilities.

Fortunately, node is also used well.

Good thing the code looks pretty fast.

Ah, so that’s what the entrance says!

Oh, it’s just webpack wrapped!

Emm, code to write really simple, very standard!

Oh oh, the original can do so, learning!

Yi? How about that?

Or maybe it’s a recent obsession with source code (axios/ ESLint /websocket the other day).

At @vue/cli-service v4.5.9 find the following key parts:

Node_modules / @ vue/cli - service/lib/config/base/js/file name L55 webpackConfig. Resolve / / This plugin can be removed once we have  switch to Webpack 6 .plugin('pnp') .use({ ... require('pnp-webpack-plugin') }) .end() .extensions .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm']) .end() .modules .add('node_modules') .add(api.resolve('node_modules')) .add(resolveLocal('node_modules')) . The end (). The alias. The set (' @ ', API. Resolve (' SRC ')) / / line 55, the set (' config 'API. Resolve (' SRC/config)) / / new individualCopy the code

Restart the service and run the command. !!!!!!!!! Damn it, the red wavy line is still there.

L55 ‘. Set (‘@’, api.resolve(‘ SRC ‘)) ‘, vue. Config.js

Restart the service and run the command. —–> nothing has changed.

Delete the cache directory under node_modules, restart, and run ——> nothing changed.

I’m so angry. Shut the damn thing down and pee.

Drank a tall glass of water, pulled the shit back, opened the IDE, shocked

The red wavy line is gone

Not an error

Run ‘NPM run serve’ ——>

It’s better to restart it.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

That’s the story of my afternoon, IDE. Your fucking story.

I also modified typescript alias configuration as follows:

"Paths" : {" * ":" * ", "SRC / *"], "@ / *" : / / new visit/SRC / * "}Copy the code

This can also be imported directly in ts files without the need for ‘@/’.

// home.ts import Api from 'api'; SRC/API /index.tsCopy the code

That leaves the question: Why? Slow IDE recognition? Have a cache? How does that work? Even though most sets (‘@’) are commented, why is the file still found in the code? This means that the comment is not valid. Seek to organize communication.