Запуск режима Vite Dev в приложении Symfony 7 с DDEV Webserver ⇐ Php

[Anonymous]

Я хотел запустить VITE в режиме разработки (смотрите файлы JS и CSS) для моего приложения Symfony 7, которое обслуживается с DDEV WebServer. PrettyPrint-Override ">

Код: Выделить всё

// package.json
{
// ...
"scripts": {
"dev": "vite",
"build": "vite build"
},
}

Теперь, https://my.ddev.site работает нормально, и мои активы загружаются отлично при использовании $ npm Run Build . Но использование $ npm Run Dev не работает для меня. Кажется, мои активы загружаются с неправильного хоста в режиме разработки. Они загружаются из: < /p>

Код: Выделить всё

< /code>
, где я бы хотел, чтобы это было: < /p>

< /code>
В идеале я хочу, чтобы мои активы были просмотрены в режиме разработки, а браузер автоматически обновляется. < /p>
Я попытался загрузить другой хост, прокси или Другие настройки с in vite.config.js: < /p>
// vite.config.js
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import autoprefixer from "autoprefixer";

/* if you're using React */
// import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
autoprefixer
],
server: {
// host: "https://my.ddev.site", // Error: getaddrinfo ENOTFOUND https://my.ddev.site
// origin: 'https://my.ddev.site', // Does update the asset path but ends up in a loop
proxy: {
// Using the proxy instance
'^/': {
target: 'https://my.ddev.site',
changeOrigin: true,
configure: (proxy, options) => {
// proxy will be an instance of 'http-proxy'
},
},
},
},
build: {
rollupOptions: {
input: {
app: "./assets/app.js"
},
}
},
});
< /code>
Но пока не повезло. Может кто -нибудь мне помочь? Я не знаю, помогает ли это, но я работаю над macOS < /p>
Спасибо! < /P>

После прочтения https : //ddev.com//blog/working-with-vite-in-ddev/ (спасибо @rfay) Я добавил это в свой конфигурация ddev:
// .ddev/config.yaml
web_extra_exposed_ports:
- name: vite
container_port: 5173
http_port: 5172
https_port: 5173
< /code>
перезапущенный ddev < /p>
добавил это в vite.config.js: < /p>
const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

export default defineConfig({

// Adjust Vites dev server to work with DDEV
// https://vitejs.dev/config/server-options.html
server: {
// respond to all network requests:
host: '0.0.0.0',
port: port,
strictPort: true,
// Defines the origin of the generated asset URLs during development
origin: origin
}

});
< /code>
Теперь путь верен, но я получаю ошибку Cors: < /p>
Access to script at 'http://my.ddev.site:5173/build/@vite/client' from origin 'http://my.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

приблизиться, все еще не работает


Подробнее здесь: https://stackoverflow.com/questions/787 ... -webserver