在 docker 容器内运行 vite 开发服务器

Question

我有一个 Vue-cli 应用程序，我正在尝试将其转换为 vite。我正在使用 Docker 来运行服务器。我看了几个教程，并让 vite 在开发模式下运行，没有错误。但是，浏览器无法访问该端口。也就是说，当我在 macbook 的命令行上（在 Docker 之外）时，我不能curl这样做：

$ curl localhost:8080
curl: (52) Empty reply from server

如果我尝试 localhost:8081 我得到Failed to connect. 此外，如果我运行 webpack 开发服务器，它会正常工作，所以我知道我的容器的端口已公开。

另外，如果我在运行 vite 服务器的同一虚拟机中运行curl，它就会工作，所以我知道 vite 正在工作。

详细信息如下：

在 package.json 中：

...
"dev": "vue-cli-service serve",
"vite": "vite",
...

整个 vite.config.ts 文件：

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        port: 8080
    }
})

启动容器的命令：

docker-compose run --publish 8080:8080 --rm app bash

docker-compose.yml 文件：

version: '3.7'

services:
  app:
    image: myapp
    build: .
    container_name: myapp
    ports:
      - "8080:8080"

Docker 文件：

FROM node:16.10.0

RUN npm install -g npm@8.1.3
RUN npm install -g @vue/cli@4.5.15

RUN mkdir /srv/app && chown node:node /srv/app

USER node

WORKDIR /srv/app

我在 vite 的 docker 容器内运行的命令：

npm run vite

我在 docker 容器内为 vue-cli 运行的命令：

npm run dev

所以，总结一下：我的设置在运行 vue-cli 开发服务器时有效，但在使用 vite 开发服务器时不起作用。

Answer 1

我想到了。我需要在配置中添加“主机”属性，所以现在我的 vite.config.ts 文件是：

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        host: true,
        port: 8080
    }
})

Answer 2

你还可以使用以下命令启动你的 vite 服务器：

$ npm run dev -- --host

这会将 --host 标志传递给 vite 命令行。

您将看到如下输出：

vite v2.7.9 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.4.68:3000/

  ready in 237ms.

（我正在运行 VirtualBox VM - 但我认为这也适用于这里。）

Answer 3

您需要添加主机0.0.0.0以允许任何外部访问：

export default defineConfig({
server: {
    host: '0.0.0.0',
    watch: {
        usePolling: true
    }
},})