vue.js 在远程服务器上运行vite dev的方法(如Laravel Mix)

djmepvbi 于 2023-01-09 发布在 Vue.js

关注(0)|答案(6)|浏览(201)

我已经从Laravel Mix切换到Vite，并试图完成同样的事情“npm运行手表”为Laravel Mix所做的。我们的临时服务器不在本地（例如staging.app-domain-name.com）。如果我用Vite运行npm run dev，它会加速应该在http：//ip：3000的“dev”服务器，但显然这不起作用。除了没有一个活动的监视器之外，我无法让dev与Vue Devtools插件一起使用（因为Vite只能在服务器上输出prod）。
我的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中的一些东西需要设置才能完成。我已经浏览了文档，但没有找到足够清楚的东西。

vue.js

来源：https://stackoverflow.com/questions/68855929/a-way-to-run-vite-dev-on-remote-server-like-laravel-mix

6条答案

按热度按时间

w6mmgewl1#

要让Vite也监听网络接口，只需在dev脚本中添加**--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上遇到了一个问题。我用另一种方法解决了它。它取决于Web服务器。我使用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默认只在本地主机上侦听。

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

最后，我把脚本到我的布局刀片结束维特开始工作。

<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 https://sebastiandedeyne.com/vite-with-laravel设置Vite的指南

赞(0）回复(0）举报 2023-01-09

rdrgkggo2#

将此配置的此服务器部分添加到vite.config.js文件中的配置中为我修复了一些问题。

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

除非您可能希望将host部分从localhost更改为您的服务器的IP地址。
然后像其他人提到的那样执行npm run dev -- --host。
我从here复制粘贴了这个答案，没有阅读任何其他关于它的内容或它为什么工作。

赞(0）回复(0）举报 2023-01-09

2lpgd9683#

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

npm run dev -- --host

赞(0）回复(0）举报 2023-01-09

vcudknz34#

试试这个：

CMD [ "npm", "run", "dev", "--", "--host"]

对我来说很有效，但应用程序一直在重新加载

赞(0）回复(0）举报 2023-01-09

brjng4g35#

将参数"--" "--host"添加到我的Docker文件中就达到了这个目的。
像这样：
CMD ["npm"，"运行"，"开发"，"--"，"--主机"]
这允许我以开发模式启动服务器，并从我的主机访问它。

赞(0）回复(0）举报 2023-01-09

sqxo8psd6#

"scripts": {
    "cmd": "cmd /k npm run dev -- --host",
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"

赞(0）回复(0）举报 2023-01-09

我来回答

vue.js 在远程服务器上运行vite dev的方法(如Laravel Mix)

6条答案

相关问题

热门标签

最新问答