一种在远程服务器上运行 vite dev 的方法（如 Laravel Mix）

Question

我已经从 Laravel Mix 切换到 Vite，并且正在尝试完成“npm run watch”为 Laravel Mix 所做的同样的事情。注意：我们的临时服务器不是本地的（即 staging.app-domain-name.com）。如果我使用 Vite 运行 npm run dev ，它会加速应该位于 http://ip:3000 的“dev”服务器，但这显然不起作用。除了没有活跃的观察者之外，我无法让开发人员与 Vue Devtools 插件一起使用（因为 vite 只能在服务器上吐出产品）。

我的 vite.config.js：

const { resolve } = require('path');
import vue from '@vitejs/plugin-vue';

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/dist/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: resolve(__dirname, 'public/dist'),
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },

    server: {
        host: true,
        port: '8080',
        hot: true
    },

    plugins: [vue()],

    resolve: {
        alias: {
            '@': resolve('./resources/js'),
        },
    },
});

我的应用程序.js

import "./bootstrap";
import '../css/app.css';
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

let asyncViews = () => {
    return import.meta.glob('./Pages/**/*.vue');
}

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: async name => {
                if (import.meta.env.DEV) {
                    return (await import(`./Pages/${name}.vue`)).default;
                } else {
                    let pages = asyncViews();
                    const importPage = pages[`./Pages/${name}.vue`];
                    return importPage().then(module => module.default);
                }
            }
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

和 package.json 脚本：

"scripts": {
    "predev": "printf \"dev\" > public/hot",
    "dev": "vite",
    "preprod": "printf \"prod\" > public/hot",
    "prod": "vite build"
}

通过运行在远程服务器上生成开发包的期望结果

npm run dev

目前它尝试创建 localhost dev。我假设需要设置 vite.config.js 中的某些内容才能完成此操作。我已经浏览了文档，但找不到任何足够清晰的内容。

Answer 1

要告诉 Vite 也在网络接口上监听，只需将--host参数添加到开发脚本中：

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

它给了我这样的结果：

vite v2.5.10 dev server running at:
> Local:    http://localhost:3000/
> Network:  http://x.y.x.z:3000/     <-- server public IP
> Network:  http://10.10.10.1:3000/  <-- server local IP via VPN

ready in 330ms.

但这不是解决办法。我遇到了 CORS 问题。我用另一种方式解决了。这取决于网络服务器。我使用 nGinx 并将反向代理设置为侦听端口 3000。

server {
    listen x.y.x.z:3000 ssl;       ### Server public IP address
    server_name dev.example.com;
    location / {
        proxy_pass https://127.0.0.1:3000/;    ### https: is Important
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
    # SSL config
    ssl_certificate      /srv/certs/example.com/fullchain.cer;
    ssl_certificate_key  /srv/certs/example.com/example.com.key;
    include ssl_config;
}

由于不与同一端口上的 vite 冲突，因此仅侦听公共 IP 地址也很重要。Vite 默认仅在本地主机上侦听。重新加载 nGinx

sudo nginx -t
sudo systemctl reload nginx

在 package.json 中我放入 --https 属性

{
    "private": true,
    "scripts": {
        "dev": "vite --https",
        "prod": "vite build"
    },
    "devDependencies": {
        "postcss": "^8.1.14",
        "vite": "^2.5.10"
    }
}

就是这样。现在我可以跑了

npm run dev

最后我将脚本放入我的布局刀片端 Vite 开始工作。

<script type="module" src="https://dev.example.com:3000/@vite/client"></script>
<script type="module" src="https://dev.example.com:3000/resources/js/app.js"></script>

设置 nginx 代理 websocket https://www.nginx.com/blog/websocket-nginx/

Sebastyan 使用 Laravel 设置 Vite 的指南 https://sebastiandedeyne.com/vite-with-laravel

Answer 2

将此配置的服务器部分添加到vite.config.js文件中的配置中可以为我解决问题。

export default defineConfig({
    server: {
      hmr: {
        host: 'localhost',
      }
    }
});

除非您可能想要将host部分更改localhost为服务器的 IP 地址。

然后npm run dev -- --host按照其他人提到的去做。

我从这里复制粘贴了这个答案，没有阅读任何其他内容或它为什么有效。

Answer 3

在我的情况下添加--host分隔--工作 - 这样不需要更改配置文件：

npm run dev -- --host