Docker中的vuejs拖放示例不起作用 [英] vuejs drag and drop example in docker not working

问题描述

我的目标是尝试

https://www.npmjs.com/package/vue-drag-drop

在Docker容器中。

in a docker container.

我正在使用以下Dockerfile：

I am using the following Dockerfile:

# WF 2018-09-18
FROM ubuntu:18.04

MAINTAINER Wolfgang Fahl "[e-mail]"


ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update -qq \
        && apt-get install -y nodejs npm git unzip vim \
        && rm -rf /var/lib/apt/lists/* /var/cache/apt/* 

RUN mkdir /app
WORKDIR /app 

RUN git clone https://github.com/cameronhimself/vue-drag-drop-demo
WORKDIR /app/vue-drag-drop-demo

# application specific node dependencies
RUN npm install

# enable port 8080
EXPOSE 8080
# start the webserver
CMD npm run dev

我使用

docker build -t vuedragdrop / bitplan：latest进行构建。

docker build -t vuedragdrop/bitplan:latest .

，然后我使用

docker run -it -p 8080:8080 vuedragdrop/bitplan:latest /bin/bash

在容器中，我发出命令：

in the container I issue the command:

npm run dev

然后抱怨浏览器在无头环境中不可用，所以我更改package.json，添加服务脚本帽子不会调用--open

then complains about the browser not being available in a headless environment so i change package.json adding a serve script hat will not call --open

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "serve": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

当我现在尝试使用

npm run serve

该命令给了我警告和输出，我完全不理解，因为这是我第一次vue.js node.js试用

the command gives me warnings and output I completly do not understand, since this is my first vue.js node.js trial

我应该怎么做才能使事情正常运行？

npm运行服务的输出

> vue-drag-drop-demo@1.0.0 serve /app/vue-drag-drop-demo
> cross-env NODE_ENV=development webpack-dev-server --hot

Project is running at http://localhost:8080/
webpack output is served from /
404s will fallback to /index.html
(node:89) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: f13489ff5ff9cb970798
Version: webpack 2.7.0
Time: 2562ms
                                    Asset       Size  Chunks                    Chunk Names
drag.png?82b9c7a5a3f405032b1db71a25f67021    6.85 kB          [emitted]         
                                 build.js    2.06 MB       0  [emitted]  [big]  main
                               index.html  416 bytes          [emitted]         
chunk    {0} build.js (main) 738 kB [entry] [rendered]
    [1] ./~/vue/dist/vue.esm.js 292 kB {0} [built]
    [2] ./~/vue-loader/lib/component-normalizer.js 2.55 kB {0} [built]
   [18] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [19] ./src/main.js 129 bytes {0} [built]
   [20] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
   [21] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
   [41] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
   [48] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [50] ./~/url/url.js 23.3 kB {0} [built]
   [52] ./src/App.vue 1.74 kB {0} [built]
   [88] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
   [89] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
   [91] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
   [92] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [93] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
     + 79 hidden modules

WARNING in ./~/vue-loader/lib/template-compiler?{"id":"data-v-78fe715d","hasScoped":true}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/Scoped.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
 @ ./src/Scoped.vue 10:2-192
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/vue-loader/lib/template-compiler?{"id":"data-v-78fe715d","hasScoped":true}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/Scoped.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
 @ ./src/Scoped.vue 10:2-192
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 548 kB [entry] [rendered]
        [0] ./~/lodash/lodash.js 540 kB {0} [built]
        [1] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-template/index.ejs 6.92 kB {0} [built]
        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
        [3] (webpack)/buildin/module.js 517 bytes {0} [built]

推荐答案

我在本地对其进行了正常的测试，但我进行了一些更改

I test it locally its working fine but I did few changes

1. 如果您检查现有的package.json文件 npm run dev 的命令不是为docker设计的。

1. If you check the existing package.json file the command that npm run dev is not designed for docker.

这是我更新的通讯并以 headless 模式和 host 方式运行的Docker。

Here is my updated command for docker in headless mode and with host.

`cross-env NODE_ENV=development webpack-dev-server --hot --port 8080 --host 0.0.0.0`

这是修改了package.json的图像

Here is the image with modified package.json

docker run --rm --name abc -it -p 8080:8080 adilm7177/vue-drag-drop-demo ash -c 'npm run dev'

这篇关于Docker中的vuejs拖放示例不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！