Поделиться через

Руководство. Создание приложения ASP.NET Core с помощью Vue в Visual Studio

  • Статья

В этой статье вы узнаете, как создать проект ASP.NET Core для работы в качестве серверной части API и проекта Vue для работы в качестве пользовательского интерфейса.

Visual Studio включает шаблоны ASP.NET Core Single Page Application (SPA), поддерживающие Angular, React и Vue. Шаблоны предоставляют встроенную папку клиентского приложения в проектах ASP.NET Core, содержащих базовые файлы и папки каждой платформы.

Метод, описанный в этой статье, можно использовать для создания ASP.NET одностраничных приложений core, которые:

  • Поместите клиентское приложение в отдельный проект вне проекта ASP.NET Core
  • Создание клиентского проекта на основе платформы CLI, установленной на компьютере

Заметка

В этой статье описывается процесс создания проекта с помощью обновленного шаблона в Visual Studio 2022 версии 17.11, который использует интерфейс командной строки Vite. Vite определяет версию Vue с помощью зависимостей проекта, например настроенных в package.json.

Необходимые условия

Не забудьте установить следующее:

  • Visual Studio 2022 версии 17.11 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки. Перейдите на страницу загрузки Visual Studio, чтобы бесплатно установить ее. Если вам нужно установить рабочую нагрузку и у вас уже есть Visual Studio, перейдите в раздел Tools>Get Tools and Features..., который открывает Установщик Visual Studio. Выберите рабочую нагрузку ASP.NET и веб-разработки, затем выберите Изменить.
  • npm (https://www.npmjs.com/), который входит в состав Node.js.

Создание интерфейсного приложения

  1. В окне «Окно запуска» (выберите «Файл>Окно запуска», чтобы открыть), выберите «Создать проект».

    снимок экрана: создание нового проекта

  2. Найдите Vue в строке поиска в верхней части, а затем выберите Vue и ASP.NET Core с помощью JavaScript или TypeScript в качестве выбранного языка.

    снимок экрана, показывающий выбор шаблона.

  3. Присвойте проекту имя VueWithASP и нажмите кнопку Next.

    В диалоговом окне "Дополнительные сведения" убедитесь, что включена настройка для HTTPS. В большинстве случаев оставьте остальные параметры значениями по умолчанию.

  4. Выберите Создать.

    Обозреватель решений отображает следующие сведения о проекте:

    снимок экрана с обозревателем решений.

    По сравнению с автономным шаблоном Vueвы увидите некоторые новые и измененные файлы для интеграции с ASP.NET Core:

    • vite.config.json (изменено)
    • HelloWorld.vue (изменено)
    • package.json (изменено)

Установите свойства проекта

  1. В обозревателе решений щелкните правой кнопкой мыши VueWithASP.Server и выберите Свойства.

    снимок экрана, показывающий свойства проекта Open.

  2. На странице "Свойства" откройте вкладку отладки и выберите параметр Открыть интерфейс профилей отладки. Снимите флажок запуска браузера для профиля или профиля с именем проекта ASP.NET Core, если он присутствует.

    Снимок экрана, показывающий интерфейс профилей запуска отладки.

    Это значение предотвращает открытие веб-страницы с исходными данными о погоде.

    Заметка

    В Visual Studio launch.json хранятся параметры запуска, связанные с кнопкой "Пуск" на панели отладки. В настоящее время, launch.json должен находиться в папке .vscode.

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

Запуск проекта

Нажмите F5 или нажмите кнопку "Пуск" в верхней части окна, чтобы запустить приложение. Отображаются две командные строки:

  • Запущенный проект API ASP.NET Core
  • Интерфейс командной строки Vite, показывающий сообщение, например VITE v4.4.9 ready in 780 ms

Заметка

Проверьте вывод консоли на предмет сообщений. Например, может появиться сообщение об обновлении Node.js.

Приложение Vue отображается и заполняется через API (порт localhost может отличаться от снимка экрана).

снимок экрана: приложение прогноза погоды.

Если приложение не отображается, см. устранение неполадок.

Публикация проекта

Начиная с Visual Studio 2022 версии 17.3, можно опубликовать интегрированное решение с помощью средства публикации Visual Studio.

Заметка

Чтобы использовать публикацию, создайте проект JavaScript с помощью Visual Studio 2022 версии 17.3 или более поздней.

  1. В Проводнике решений щелкните правой кнопкой мыши проект VueWithASP.Server и выберите Добавить>ссылку на проект.

    Убедитесь, что выбран проект vuewithasp.client.

  2. Выберите ОК.

  3. Щелкните правой кнопкой мыши проект ASP.NET Core снова и выберите Изменить файл проекта.

    Откроется файл .csproj проекта.

  4. В файле .csproj убедитесь, что ссылка на проект содержит элемент <ReferenceOutputAssembly> со значением false.

    Эта ссылка должна выглядеть следующим образом.

     <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

  5. Щелкните правой кнопкой мыши проект ASP.NET Core и выберите перезагрузить проект, если этот параметр доступен.

  6. В Program.csубедитесь, что следующий код присутствует.

    app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

  7. Чтобы опубликовать, щелкните правой кнопкой мыши проект ASP.NET Core, выберите Опубликоватьи выберите параметры, соответствующие требуемому сценарию опубликования, например Azure, публикация в папке и т. д.

    Процесс публикации занимает больше времени, чем только для проекта ASP.NET Core, так как команда npm run build вызывается при публикации. Команда BuildCommand по умолчанию запускает npm run build.

    При публикации в папку, см. раздел структура каталогов ASP.NET Core для получения дополнительных сведений о файлах, добавленных в папку для публикации .

Устранение неполадок

Ошибка прокси-сервера

Может возникнуть следующая ошибка:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5173 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Если вы видите эту проблему, скорее всего, интерфейсная часть запущена перед серверной частью.

  • Как только вы увидите, что командная строка серверной части работает, просто обновите приложение Vue в браузере.
  • Кроме того, убедитесь, что бэкенд настроен на запуск перед фронтендом. Чтобы проверить, выберите решение в обозревателе решений, выберите Свойства в меню проектов . Затем выберите Настроить запускаемые проекты и убедитесь, что внутренний проект ASP.NET Core сначала находится в списке. Если он не первый, выберите проект и нажмите кнопку СТРЕЛКА ВВЕРХ, чтобы сделать его первым проектом в списке запуска.

В противном случае, если порт используется, попробуйте увеличить номер порта на 1 в launchSettings.json и vite.config.js.

Ошибка конфиденциальности

Вы можете увидеть следующую ошибку сертификата:

Your connection isn't private

Попробуйте удалить сертификаты Vue из %appdata%\local\asp.net\https или %appdata%\roaming\asp.net\https, а затем повторите попытку.

Проверка портов

Если данные о погоде не загружаются правильно, может потребоваться проверить правильность портов.

  1. Убедитесь, что номера портов совпадают. Перейдите к файлу в проекте ASP.NET Core (в папке свойств ). Получите номер порта из свойства applicationUrl.

    Если есть несколько свойств applicationUrl, найдите один с помощью конечной точки https. Он должен выглядеть примерно так, как https://localhost:7142.

  2. Затем перейдите к файлу vite.config.js проекта Vue. Обновите свойство target, чтобы он соответствовал свойству applicationUrl в launchSettings.json. При обновлении это значение должно выглядеть следующим образом:

    target: 'https://localhost:7142/',

Устаревшая версия Vue

Если при создании проекта появится сообщение консоли Не удалось найти файлC:\Users\Me\source\repos\vueprojectname\package.jsв, возможно, потребуется обновить версию Vite CLI. После обновления интерфейса командной строки Vite также может потребоваться удалить файл .vuerc в C:\Users\[yourprofilename].

Докер

Если вы создадите проект с поддержкой Docker включена, сделайте следующее:

  1. После загрузки приложения получите порт HTTPS Docker с помощью окна контейнеров в Visual Studio. Проверьте вкладку Окружение или Порты.

    снимок экрана: порты контейнеров Docker.

  2. Откройте файл vite.config.js для проекта Vue. Обновите переменную target, чтобы он соответствовал порту HTTPS в окне "Контейнеры". Например, в следующем коде:

    const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7163';

    измените https://localhost:7163 на соответствующий порт HTTPS (в этом примере https://localhost:60833).

  3. Перезапустите приложение.

Если вы используете конфигурацию Docker, созданную в более ранних версиях Visual Studio, серверная часть может начать работу с профилем Docker и не прослушивать настроенный порт 5173. Чтобы устранить эту проблему, выполните приведенные действия.

Измените профиль Docker в launchSettings.json, добавив следующие свойства:

"httpPort": 5175, 
"sslPort": 5173

Дальнейшие действия

Для получения дополнительной информации о приложениях SPA в ASP.NET Core см. руководство по разработке одностраничных приложений. Связанная статья содержит дополнительный контекст для файлов проекта, таких как aspnetcore-https.js, хотя сведения о реализации отличаются из-за различий между шаблонами проектов и платформой Vue.js и другими платформами. Например, вместо папки ClientApp файлы Vue содержатся в отдельном проекте.

Сведения о MSBuild, относящиеся к клиентскому проекту, см. в свойства MSBuild для JSPS.