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


Учебник: создание приложения 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.8, который использует интерфейс командной строки Vite.

Необходимые компоненты

Обязательно установите следующие компоненты:

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

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

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

    Screenshot showing Create a new project

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

    Screenshot showing choosing a template.

  3. Присвойте проекту имя VueWithASP и нажмите кнопку "Создать".

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

    Screenshot showing Solution Explorer.

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

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

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

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

    Screenshot showing Open project properties.

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

    Screenshot showing Debug launch profiles UI.

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

    Примечание.

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

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

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

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

Примечание.

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

Откроется приложение Vue и заполняется через API. Если приложение не отображается, см. раздел Устранение неполадок.

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

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

Примечание.

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

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

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

  2. Выберите OK.

  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 вызывается при публикации. СборкаCommand выполняется npm run build по умолчанию.

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

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

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

[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 в браузере.

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

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

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

Your connection isn't private

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

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

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

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

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

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

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

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

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

Docker

Если вы включите поддержку Docker при создании проекта веб-API, серверная часть может начать работу с профилем Docker и не прослушивать настроенный порт 5173. Чтобы устранить проблему, сделайте следующее:

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

"httpPort": 5175, 
"sslPort": 5173  

Кроме того, можно выполнить сброс с помощью следующего метода:

  1. В свойствах решения укажите серверное приложение в качестве начального проекта.
  2. В меню «Отладка» перейдите к профилю серверного приложения с помощью раскрывающегося меню кнопки Пуск.
  3. Затем в свойствах решения выполните сброс до нескольких начальных проектов.

Следующие шаги

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

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