Question

我的目标是尝试

的演示代码

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

在Docker容器中。

我正在使用以下Dockerfile：

# WF 2018-09-18
FROM ubuntu:18.04

MAINTAINER Wolfgang Fahl "wf@bitplan.com"


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 run -it -p 8080:8080 vuedragdrop/bitplan:latest /bin/bash

在容器中，我发出命令：

npm run dev

然后抱怨浏览器在无头环境中不可用，因此我更改package.json，添加服务脚本帽子将不会调用--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试用

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

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]

Answer 1

我在本地对其进行了正常测试，但我没有做任何改动

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

这是我在headless模式和host下针对docker的更新命令。

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

这是带有修改后的package.json的图像

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

Answer 2

在nginx中运行构建版本也可以：

# WF 2018-09-18
FROM ubuntu:18.04

MAINTAINER Wolfgang Fahl "wf@bitplan.com"


ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update -qq \
        && apt-get install -y nginx 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

# create the app for distribution via a server
RUN npm run build

# remove default html directory
RUN rm -rf /var/www/html

# replace with symbolic link
RUN ln -s /app/vue-drag-drop-demo /var/www/html

# enable port 8080 and 80
EXPOSE 8080 80 443
# start the webserver
CMD ["nginx", "-g", "daemon off;"]

Answer 3

这将是节点版本：

# Offical node.js dockerfile
FROM node:8

RUN mkdir /app
WORKDIR /app

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

WORKDIR /app/vue-drag-drop-demo

RUN npm install

RUN sed -i "s/--open/--port 8080 --host 0.0.0.0/" package.json

EXPOSE 8080

CMD npm run dev

使用脚本来构建和运行它：

#!/bin/bash
# WF 2018-09-19
# build and run
image=bitplan/dragdropnode:latest
name=bitplan_dragdropdemo
docker build . -t $image 
docker run --rm --name $name -p 8080:8080  $image&
sleep 1
docker exec -it $name /bin/bash

Answer 4

我使用了这个docker文件

FROM alpine
RUN apk add --update nodejs npm
RUN node -v
RUN npm install -g vue-cli
COPY package.json package-lock.json /usr/src/
WORKDIR /usr/src
RUN npm install
RUN npm audit fix
EXPOSE 8080
CMD npm rebuild node-sass && npm run dev

我的package.json就是这样

"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 8080 --host 0.0.0.0", 
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },

构建后，我运行命令

docker run --rm --name <container_name> -p 8080:8080 -v %CD%:/usr/src <image_name>

docker中的vuejs拖放示例不起作用

4 个答案: