在 Windows 11 上安装 Laravel 9 + Vite

Question

我在 Windows 11 上安装了 homestead 并配置了一个应用程序 mysite.test。

我修改了主机以包含 192.168.10.10 mysite.test

我按照指南为 laravel 9 安装和配置 vite，但是该指南是面向 Valet 用户的。

如果我尝试使用默认配置运行 npm run dev，则加载 https://mysite.test 会尝试加载 https://127.0.0.1/resources/js/app.js

我知道我必须不使用 127.0.0.1 才能工作，我尝试了多种方法，即修改宅基地内的 /etc/hosts 以包含 127.0.0.1 app.mysite.test。更新 vite.config.js 以包含 server.hosts = 'app.mysite.test' 并最终在 Windows 主机中添加 192.168.10.10 app.mysite.test。

但我仍然无法让它工作并得到错误 GET https://app.mysite.test:3000/@vite/client net::ERR_CONNECTION_RESET 和 GET https://app.mysite.test:3000/resources/js/app.js net::ERR_CONNECTION_RESET

我的vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        https: true,
        host: 'app.mysite.test',
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Answer 1

编辑

几个月后，某些更新会导致更简单的配置。下面假设您已经完成必要的操作以确保您的浏览器从您的家园识别 SSL。您可能还会遇到 JS/CSS 加载失败的错误。打开在 127.0.0.1 生成的链接并接受证书将继续解决它。

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import mkcert from 'vite-plugin-mkcert'
import vue from '@vitejs/plugin-vue';
import eslint from 'vite-plugin-eslint'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      vue: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js'),
      '@app': path.resolve(__dirname, 'resources/app/js'),
      '@admin': path.resolve(__dirname, 'resources/admin/js'),
      '@common': path.resolve(__dirname, 'resources/common/js'),
      '@svg': path.resolve(__dirname, 'resources/svgs'),
    }
  },
  server: {
    https: true,
    hmr: {
      host: '127.0.0.1'
    },
    host: '127.0.0.1'
  },
  plugins: [
    mkcert(),
    vue({
      template: {
        transformAssetUrls: {
          // The Vue plugin will re-write asset URLs, when referenced
          // in Single File Components, to point to the Laravel web
          // server. Setting this to `null` allows the Laravel plugin
          // to instead re-write asset URLs to point to the Vite
          // server instead.
          base: null,

          // The Vue plugin will parse absolute URLs and treat them
          // as absolute paths to files on disk. Setting this to
          // `false` will leave absolute URLs un-touched so they can
          // reference assets in the public directly as expected.
          includeAbsolute: false,
        },
      },
    }),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/app/js/main.js',
        'resources/admin/js/main.js'
      ],
      refresh: true,
    }),
    eslint({
      fix: true
    })
  ],
});

原始答案

所以经过几次尝试，我发现了以下作品

• 如果在 Windows 中运行，在我的例子中主机需要设置为您的机器 IP“192.168.10.1”。
• 如果在 VM（宅基地）内运行，主机需要设置为“192.168.10.10” 然后两者都会让 Laravel 加载 js 和 css 文件而不会出现任何错误。但是，如果在 homestead 中触发了npm run dev，如果文件是从 Windows 更改的，HMR 将无法工作。如果文件在 VM 内部被更改（通过 SSH），HMR 会正常工作。

最终配置

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
    server: {
        https: true,
        host: '192.168.10.10'
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        mkcert()
    ],
});

使用插件 mkcert 也解决了 ssl 的问题。所以上面回答了我最初的问题，但我发现自己遇到了 HMR 无法正常工作的问题。