Статьи

Переименование папки src проекта Vue CLI 3

Сентябрь 14, 2017

Задача разработки хорошего инструмента CLI состоит в том, чтобы сбалансировать разумные значения по умолчанию и свободу настройки.

Один из лучших инструментов CLI, о которых я знаю, это Vue CLI 3. Одно из его «разумных значений по умолчанию» заключается в том, что исходные файлы, например, некомпилированные компоненты и файлы JavaScript, будут находиться в каталоге с именем  src.

Но что, если у вас есть свои собственные уникальные структуры приложений, которые вы хотите использовать, например, MVC, или, возможно, ваше собственное соглашение, которое вы используете во всех своих базах кода, поэтому вы бы предпочли дать исходной папке другое имя, например view, appи clientт. Д.

В этой проблеме GitHub пользователь спросил, как srcможно переименовать что-то еще.

Ответ в том, что это не то, что можно сделать напрямую. Как сказал Эван в своем заключительном комментарии по этому вопросу:


«Для этого не будет первоклассного варианта, потому что мы предпочитаем, чтобы все проекты Vue CLI имели согласованную стандартную структуру каталогов. Использование другого имени каталога — это только вопрос личного вкуса, поэтому, если вы настаиваете на его изменении, вы по своему усмотрению. »

Не трогай проблему, пока проблема не трогает тебя?

Так зачем связываться с этим? Это просто имя папки, имеет ли это значение?

Это был вопрос, который я должен был задать себе при составлении своего курса, который сосредоточен вокруг создания полнофункционального приложения Vue / Express, включая Vue CLI 3. Это приложение структурировано таким образом, что оно включает файлы сервера / API в подпапку скаффолда ,

В своем предыдущем посте я обсуждаю свои мысли об использовании Vue CLI 3 для размещения приложения с полным стеком: структура приложения Vue CLI 3 с полным стеком

Как убежденный индивидуалист и безнадежный перфекционист, я обнаружил, что просто не могу оставить исходные файлы клиента в папке с общим именем, в srcто время как исходные файлы сервера были в более описательной serverпапке.

Изменить имя srcможно, если вы действительно уверены, что целостность структуры папок оправдывает трудности, с которыми она сталкивается, что я объясню ниже.

Webpack Config

Основная проблема, с которой вы столкнетесь, заключается в том, что конфигурация Webpack под капотом Vue CLI 3 жестко задана srcкак имя исходного каталога.

Конфигурация Webpack непрозрачна в Vue CLI 3, но если вам нужно ее увидеть, вы можете использовать inspectкоманду.

Мой совет — записать его в файл и выполнить поиск src.

$ vue inspect > webpack.txt

В типичной установке Vue CLI вы увидите два экземпляра: srcодин в разделе псевдонимов и один в файле ввода.

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/src',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

Чтобы изменить их, вам нужно создать или добавить файл конфигурации Vue и переопределить эту конфигурацию Webpack. Мне нравится использовать метод цепочки Webpack, чтобы сделать это декларативно.

Ниже показано, как можно переопределить правила, жестко закодирующие srcкаталог, и изменить их на что-то другое:

vue.config.js

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config
      .entry("app")
      .clear()
      .add("./client/main.js")
      .end();
    config.resolve.alias
      .set("@", path.join(__dirname, "./client"))
  }
};

После этого, еще раз проверив конфигурацию Webpack, вы увидите, что srcона была заменена:

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/client',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './client/main.js'
    ]
  }
}

Проблема решена … или это? Имейте в виду, что все плагины Vue CLI 3 предполагают, srcчто это основная папка, поэтому будьте готовы продолжать модифицировать конфигурацию подобным образом при каждом добавлении плагина.

35
Share: