Как настроить запуск vite с автоматической пересборкой файлов в режиме разработки при изменении кода?

Как запустить Vite так, чтобы файлы пересобирались в режиме разработки (с автообновлением SPA в браузере), чтобы решить проблемы с CORS приложения, которое работает на локальном сервере на домене mysite.loc?
  • 21 сентября 2023 г. 5:37
Ответы на вопрос 2
Для настройки запуска Vite с автоматической пересборкой файлов в режиме разработки при изменении кода, вам следует выполнять следующие шаги:

1. Установите Vite глобально, если вы еще не сделали это, с помощью следующей команды:

```
npm install -g create-vite
```

2. Создайте новый проект Vite с помощью команды:

```
create-vite my-project-name
```

3. Перейдите в папку вашего проекта:

```
cd my-project-name
```

4. Установите зависимости проекта:

```
npm install
```

5. Откройте файл `vite.config.js`, который находится в корне вашего проекта. Закомментируйте опцию `build` и добавьте опцию `server` с настройками для локального сервера:

```javascript
import { defineConfig } from 'vite'

export default defineConfig({
  // build: {
  //   ...
  // },
  server: {
    host: 'mysite.loc',
    port: 3000,
    proxy: {
      // Опционально, если вы хотите работать с back-end API
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
```

В данном примере настройка `host` установлена на `mysite.loc`, что соответствует вашему локальному домену.

6. Запустите проект с помощью команды:

```
npm run dev
```

Теперь Vite будет запущен на вашем локальном сервере на домене `mysite.loc` и автоматически пересобирает файлы каждый раз, когда вы вносите изменения в код. Браузер также будет обновляться автоматически при внесении изменений.

Обратите внимание, что для работы на локальном сервере на домене `mysite.loc` вам может потребоваться настроить хосты в вашей операционной системе.
путь до бека надо хранить в двух файлах: .env.local и .env.development.local. В .env.local вы можете указать путь до тестового бека, например https://test-backend.com. В .env.development.local вы можете указать путь до реального бека, например https://real-backend.com.

Создайте два параметра: VITE_APP_API и API_PROXY. В .env.local установите значение VITE_APP_API равным "/api", а значение API_PROXY равным пути до тестового бека (например, https://test-backend.com). Это будет использоваться в режиме разработки.

В конфиге загрузите соответствующие .env файлы. Вы можете прочитать документацию по этому вопросу здесь: https://vitejs.dev/config/#using-environment-varia...

Также настройте прокси до апи в конфиге. Больше информации о настройке прокси вы можете найти здесь: https://vitejs.dev/config/server-options.html#serv...

Похожие вопросы