PHPStorm 对 JS 或者 Vue 文件中导入路径别名识别

在使用 PHPStorm 开发前端项目时，使用 ES6 构建项目时，会经常使用import对应的文件。

此时，我们常常会使用相对路径找到对应的文件，比如import Loading from '../../../components/Loading';，此时如果文件嵌套层次太深，则会导致这个过程十分费劲。

这里可以使用 webpack 的 alias 来处理这个问题，最终的目的是可以通过command+b，或者command+左键打开到被导入的文件。

这里以 laravel-mix 的代码演示为例。

处理前

• webpack.mix.js

const mix = require('laravel-mix');
mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    },
});

• LoginLayout.vue

<script>
import Loading from '@/components/Loading.vue';
</script>

处理后

• 新增webpack.conf.js文件

const path = require('path');
const webpack = require('webpack');
module.exports = {
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    },
}

将webpack.mix.js的配置部分分离到webpack.config.js

• 修改webpack.mix.js文件

const mix = require('laravel-mix');
const config = require('./webpack.config');
mix.webpackConfig(config);

• 修改 PHPStorm 中的 webpack 配置

参考

• Path aliases for imports in WebStorm