Учебник: создание приложения ASP.NET Core с Vue в Visual Studio

Статья
11/14/2023

В этой статье вы узнаете, как создать проект 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.

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

В окне запуска (чтобы открыть его, щелкните Файл>Окно запуска) выберите Создание нового проекта.
Найдите Vue в строке поиска в верхней части, а затем выберите Vue и ASP.NET Core (предварительная версия) с помощью JavaScript или TypeScript в качестве выбранного языка.
Присвойте проекту имя VueWithASP и нажмите кнопку "Создать".

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

По сравнению с автономным шаблоном Vue вы увидите некоторые новые и измененные файлы для интеграции с ASP.NET Core:
- vite.config.json (изменено)
- HelloWorld.vue (изменено)
- package.json (изменено)

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

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

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

Примечание.

В 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 или более поздней.

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

Убедитесь, что выбран проект vuewithasp.client .
Выберите OK.
Щелкните правой кнопкой мыши проект ASP.NET Core и выберите "Изменить файл проекта".

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

Эта ссылка должна выглядеть следующим образом.
```
 <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
Щелкните правой кнопкой мыши проект ASP.NET Core и выберите "Перезагрузить проект ", если этот параметр доступен.

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

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

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

Чтобы опубликовать, щелкните правой кнопкой мыши проект 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, а затем повторите попытку.

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

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

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

Если имеется несколько свойств applicationUrl, выберите то, которое использует конечную точку https. Оно должно иметь следующий вид: https://localhost:7142.
Затем перейдите к файлу 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

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

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

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

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

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

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

Учебник: создание приложения ASP.NET Core с Vue в Visual Studio

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

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

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

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

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

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

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

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

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

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

Docker

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

Обратная связь

Дополнительные ресурсы