您似乎是在容器中运行Vue CLI

Question

我正在尝试使用vs-code远程容器来运行我的vuejs应用程序。它已部署，我可以通过url: localhost:8080/访问它，但如果我更新一些js文件，它不会重新编译，甚至不会热重新加载。

devcontainer.json

{
    "name": "Aquawebvue",
    "dockerFile": "Dockerfile",
    "appPort": [3000],
    "runArgs": ["-u", "node"],
    "settings": {
        "workbench.colorTheme": "Cobalt2",
        "terminal.integrated.automationShell.linux": "/bin/bash"
    },
    "postCreateCommand": "yarn",
    "extensions": [
        "esbenp.prettier-vscode",
        "wesbos.theme-cobalt2",
    ]
}

Dockerfile

FROM node:12.13.0
RUN npm install -g prettier

在打开容器并在终端中运行cmd 'yarn serve‘后，它成功地构建和部署，但我收到了以下警告：

  It seems you are running Vue CLI inside a container.

  Since you are using a non-root publicPath, the hot-reload socket
  will not be able to infer the correct URL to connect. You should
  explicitly specify the URL via devServer.public.

Answer 1

VSCode为Vue项目预定义了一个.devcontainer目录。它可以在GitHub上找到。您可以通过运行命令Add Development Container Configuration Files...自动安装它。>显示所有定义> Vue。

​

​

Dockerfile

# [Choice] Node.js version: 14, 12, 10
ARG VARIANT=14
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

RUN su node -c "umask 0002 && npm install -g http-server @vue/cli @vue/cli-service-global"
WORKDIR /app

EXPOSE 8080

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

devcontainer.json

{
    "name": "Vue (Community)",
    "build": {
        "dockerfile": "Dockerfile",
        "context": "..",
        // Update 'VARIANT' to pick a Node version: 10, 12, 14
        "args": { "VARIANT": "14" }
    },

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/zsh"
    },
    
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "dbaeumer.vscode-eslint",
        "octref.vetur"
    ],
    
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    "forwardPorts": [
        8080
    ],
    
    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "uname -a",
    
    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "node"
}