Блог

Главная - Вопросы по программированию - установить jsconfig.json в проекте VueJS

установить jsconfig.json в проекте VueJS

#javascript #vue.js #vuejs2 #vscode-jsconfig

#javascript #vue.js #vuejs2 #vscode-jsconfig

Вопрос:

Используйте js 2.6.X, создайте с помощью Vue-Cli 4.5.X, используя имя vue create

Я добавил jsconfig.json в корневую папку

   "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/modules/*": ["./src/store/modules/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

@ alias работает.
Я могу сделать @/store/modules/…

тот, который я добавил

 @/modules/*

не будет работать

 This dependency was not found:

* @/modules/... in in ./node_modules/cache-loader/dist/cjs...

есть идеи о том, как я могу это решить? Я проверил несколько источников, ни один из них, похоже, не учитывает настройки vue js и vue-cli….

Я также думаю, что @/ * — это vue-cli по умолчанию setup…so добавление его, возможно, бессмысленно, как есть

Ответ №1:

Что сработало для меня, так это также добавление этих псевдонимов в конфигурацию webpack в vue.config.js 

     configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, vueSrc),
                '@modules': path.resolve(__dirname, vueSrc   'store/modules')
            },
            extensions: ['.js', '.vue', '.json']
        }
    }

Обратите также внимание, что я использовал напрямую, @modules а не @/modules которые соответствовали бы обоим, попробуйте изменить порядок в случае, если что-то вроде первого совпадения не выполняется, но я думаю, что это самая длинная политика соответствия через webpack

Комментарии:

1. Это правильный ответ, потому что Vue не уважает и не заботится о tsconfig.json и / или jsconfig.json . Более конкретно, всегда следует убедиться, что оба TS compilerOptions.paths и webpack resolve.alias синхронизированы: один для поддержки IDE, другой для пошаговой сборки.

2. …более конкретно, это еще красивее с chainWebpack : chainWebpack: (config) => config.resolve.alias.set('@api', path.resolve(__dirname, '..', 'some', 'folder')) . Смотрите также эту проблему с GitHub

Ответ №2:

Попробуйте использовать

 "@@/*":["./src/store/modules/*"]

и в вашем коде используйте

 import object from "@@/module_name";

будет искать ./src/store/modules/module_name