使用 DDEV Web 服务器在 Symfony 7 应用程序上运行 Vite 开发模式

Question

我一直在寻找在开发模式下为我的 Symfony 7 应用程序运行 Vite（观看 JS 和 CSS 文件），该应用程序由 DDEV Web 服务器提供服务。

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

现在，https://my.ddev.site 运行良好，并且在使用

$ npm run build

时我的资源加载得很好。但使用

$ 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 加载不同的主机、代理或其他设置：

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

但到目前为止还没有运气。有人能帮我吗？我不知道这是否有帮助，但我正在 MacOS 上工作

谢谢！

---

阅读完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

重启DDEV

将此添加到 vite.config.js：

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
    }
    
});

现在路径是正确的，但我收到 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.

越来越近了，还是不行

Answer 1

如果您遇到同样的错误并且正在寻找解决方案，这对我来说很有效：

1. 确保您已安装 SSL
   

   $ mkcert -install

2. 重启ddev服务
   

   $ ddev poweroff

3. 启动您的应用程序
   

   $ ddev start

4. 重启Vite
   

   $ ddev npm run dev

5. 在浏览器 my.ddev.site 中访问您的应用程序并重新加载页面

完成这些步骤后，我的浏览器中仍然出现 CORS 错误，但这次有点不同。我执行了以下步骤，之后对我有用：

1. 在浏览器中访问https://my.ddev.site:5173
在浏览器中返回您的应用程序并再次重新加载页面。