如何让Vite通过Homestead服务资产？

Question

我有一个全新的 Laravel 安装（减去添加 Vue.js），它是通过 Homestead 提供的。当我在浏览器中访问我的页面时，我发现 JavaScript 无法加载，因为出现以下错误：

https://my-homestead-url.test:5174/js/app.js net::ERR_CONNECTION_REFUSED

。

我的 homestead.yaml 看起来像这样：

    ip: "192.168.56.12"
    memory: 2048
    cpus: 2
    provider: virtualbox
    
    authorize: ~/.ssh/id_rsa.pub
    ssl: true
    keys:
        - ~/.ssh/id_rsa
    
    folders:
        - map: ~/code
          to: /home/vagrant/code
    
    sites:
        - map: my-homestead-url.test
          to: /home/vagrant/code/my-homestead-project/public
          php: "8.0"
    
    databases:
        - my_homestead_url_db
    
    features:
        - mysql: true
        - mariadb: false
        - ohmyzsh: false
        - webdriver: false
    
    ports:
     - send: 5173
       to: 5173

我的 vite.config.js 文件如下所示：

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import vue from '@vitejs/plugin-vue2';
    import fs from 'node:fs';
    import path from 'node:path';
    
    export default defineConfig({
        server: {
            host: 'my-homestead-url.test',
            https: false,
            hmr: {
                host: 'my-homestead-url.test',
            },
        },
        plugins: [
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    }
                }
            }),
            laravel({
                input: [
                    // 'resources/css/app.css',
                    'resources/js/app.js',
                ],
                refresh: true,
            }),
        ],
    });

我相信这与我的宅基地项目是通过 ssl 提供服务这一事实有关，因此，我尝试根据here

找到的文档指定我的 .crt 和 .key 文件

（https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener）

但是，当我重新运行 vite（以

npm run dev --host 0.0.0.0

运行）时，它仍然无法加载我的 JavaScript，连接被拒绝。

我做错了什么？

Answer 1

尝试更改 vite 配置

将

host: 'my-homestead-url.test',

更改为 IP 地址

这是我的

vite.config.js

文件

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

export default defineConfig({
    server: {
        hmr: {
            protocol: 'ws',
            https: false,
            host: '192.168.56.56',
        },
        host: "192.168.56.56",
        https: false,
        watch: {
          usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

然后打开 package.json 文件并将

--host

添加到

"dev": "vite"

中，它应该类似于

"dev": "vite --host"

"scripts": {
    "dev": "vite --host",
    "build": "vite build"
},

Answer 2

也许您的

Homestead.yaml

配置不正确。 我看到在端口 5174 上请求

app.js

文件，但在您的

Homestead.yaml

文件中您正在重定向 5173 端口。

ports:
     - send: 5173    # change these ports to 5174
       to: 5173

Answer 3

除了确保设置正确且严格的端口之外，如果在

ssl: true

配置中设置了

Homestead.yaml

并且宅基地站点正在使用

https

，则控制台中可能会显示不匹配/不安全内容的警告或错误如果 vite 服务器没有使用

https

.

我建议将站点的证书和密钥文件从 Homestead VM

/etc/ssl/certs/

目录复制到共享文件夹，例如用户：group

/home/vagrant/code/certs

拥有的

vagrant:vagrant

，然后更新

vite.config.js

配置以使用

https 

。同样对于 Homestead，据说你必须打开投票。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
import fs from 'node:fs';
import path from 'node:path';

export default defineConfig({
    server: {
        host: 'my-homestead-url.test',
        port: 5173,
        strictPort: true,
        https: {
            key: fs.readFileSync(`/home/vagrant/code/certs/my-homestead-url.test.key`),
            cert: fs.readFileSync(`/home/vagrant/code/certs/my-homestead-url.test.crt`),
            },
        hmr: {
            host: 'my-homestead-url.test',
        },
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                }
            }
        }),
        laravel({
            input: [
                // 'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});