vuejs阻力和码头工人下降例如不工作(vuejs drag and drop example in

2019-09-27 02:02发布

站内文章 / 前沿技术
26 0 0

我的目标是尝试演示代码

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

在码头工人容器。

我使用以下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

我建立与

搬运工建立-t vuedragdrop / bitplan：最新。

然后我交互运行与图像

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:

我测试了它在本地工作正常，但我做了一些改动

  1. 如果你检查现有的package.json文件命令npm run dev是不适合泊坞窗。

这是我更新的在泊坞窗命令headless模式和host 。 

`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


文章来源: vuejs drag and drop example in docker not working
标签： docker vue.js
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~