如何在电商单仓项目中共享jsconfig.json配置？

问题原因 #

根目录的jsconfig.json仅用于IDE代码提示与路径跳转，Vue CLI依赖的webpack构建工具不会自动读取该配置中的paths别名规则。启动服务时webpack无法识别@/common/*这类自定义别名，因此出现模块找不到的报错。

解决步骤 #

需要在各端的vue.config.js中手动配置webpack的resolve.alias，将别名映射到实际文件路径：

1. 引入Node.js的path模块，用于处理绝对路径，避免相对路径的歧义
2. 在defineConfig中添加configureWebpack配置，定义别名与实际路径的映射关系

修改后的seller/vue.config.js示例 #

const { defineConfig } = require('@vue/cli-service');
const path = require('path');

module.exports = defineConfig({
  publicPath: '/',
  transpileDependencies: true,
  pages: {
    index: {
      entry: 'seller/src/main.js',
      title: 'Supersave | Seller',
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@/seller': path.resolve(__dirname, 'src'),
        '@/common': path.resolve(__dirname, '../common'),
        '@/buyer': path.resolve(__dirname, '../buyer/src')
      }
    }
  }
});

可选优化：复用根目录别名配置 #

如果不想在每个端的配置文件重复编写别名规则，可以在根目录创建共用配置文件：

// 根目录/alias.config.js
const path = require('path');

module.exports = {
  '@/buyer': path.resolve(__dirname, 'buyer/src'),
  '@/seller': path.resolve(__dirname, 'seller/src'),
  '@/common': path.resolve(__dirname, 'common')
};

然后在各端的vue.config.js中引入复用：

const { defineConfig } = require('@vue/cli-service');
const aliases = require('../alias.config.js');

module.exports = defineConfig({
  // 原有配置项...
  configureWebpack: {
    resolve: {
      alias: aliases
    }
  }
});

验证 #

修改完成后，重新执行启动命令：

VUE_CLI_SERVICE_CONFIG_PATH=./seller/vue.config.js vue-cli-service serve

此时webpack即可正确解析@/common/*这类路径别名，模块找不到的报错会消失。

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