在DDEV服务器的Symfony 7应用中运行Vite开发模式遇阻求助

问题描述 #

我在DDEV上部署Symfony 7应用，想通过Vite开发模式监听JS/CSS文件并实现浏览器自动更新：

• 执行npm run build时，https://my.ddev.site运行正常，资源加载无问题；
• 执行npm run dev时，资源加载路径错误，当前生成的路径是<script type="module" src="http://127.0.0.1:3000/build/assets/app.js"></script>，期望路径为<script type="module" src="/build/assets/app.js"></script>。

已尝试的配置 #

第一次修改vite.config.js #

尝试调整host、origin、proxy参数，但未解决问题：

// 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"
            },
        }
    },
});

配置DDEV端口暴露 #

在.ddev/config.yaml添加端口配置：

# .ddev/config.yaml
web_extra_exposed_ports:
    - name: vite
      container_port: 5173
      http_port: 5172
      https_port: 5173

第二次修改vite.config.js #

重启DDEV后调整origin等参数，路径恢复正常，但出现CORS错误：

const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

export default defineConfig({
    // Adjust Vites dev server to work with DDEV
    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
    }
});

CORS错误信息：

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.

设备环境：MacOS

解决方案 #

1. 修正Vite配置解决CORS与路径问题 #

更新vite.config.js，添加CORS允许规则并调整origin设置：

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import autoprefixer from "autoprefixer";

export default defineConfig({
    plugins: [symfonyPlugin(), autoprefixer],
    server: {
        host: '0.0.0.0',
        port: 5173,
        strictPort: true,
        // 设置origin为DDEV主域名，生成相对化的资源路径
        origin: process.env.DDEV_PRIMARY_URL,
        // 配置CORS允许主域名跨域请求
        cors: {
            origin: process.env.DDEV_PRIMARY_URL,
            credentials: true
        }
    },
    build: {
        rollupOptions: {
            input: {
                app: "./assets/app.js"
            },
        }
    },
});

2. 确保Symfony模板正确引用资源 #

在Symfony模板中使用Vite官方辅助函数，避免硬编码路径：

{{ vite_entry_script_tags('app') }}
{{ vite_entry_link_tags('app') }}

3. 重启服务生效 #

• 重启DDEV：ddev restart
• 重新启动Vite开发服务器：npm run dev

内容的提问来源于stack exchange，提问作者Nathalie