无法使用包裹在docker中部署vue应用程序答案

【问题标题】：cant deploy vue app in docker with parcel无法使用包裹在docker中部署vue应用程序
【发布时间】：2021-06-25 14:50:12
【问题描述】：

无法在 docker 容器中加载 vue，使用 parcel。

Vue 没有加载，vue devtools 找不到 vue。所有文件似乎都在 devtools/sources 中。

它使用 npm run dev 在 docker 之外工作。

JS 错误：未捕获的类型错误：无法读取未定义的属性“道具” 在 vue.common.prod.js:6

Dockerfile：

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app 
COPY package.json /app
RUN apk add --update npm
RUN apk add util-linux
ENV FONTAWESOME_NPM_AUTH_TOKEN XXXXX
COPY .npmrc /app
RUN npm install
RUN npm audit fix
COPY src/. /app/src
COPY index.html /app
RUN npm run production

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "alias": {
    "vue": "/node_modules/vue/dist/vue.common.js"
  },
  "scripts": {
    "dev": "parcel index.html",
    "production": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-pro": "^5.15.1",
    "axios": "^0.21.1",
    "bootstrap": "^4.5.3",
    "bootstrap-vue": "^2.21.2",
    "faker": "^5.1.0",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "vue": "^2.6.12",
    "vue-hot-reload-api": "^2.3.4",
    "vue-router": "^3.4.9"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "parcel-bundler": "^1.12.4",
    "sass": "^1.32.2",
    "vue-template-compiler": "^2.6.12"
  }
}

【问题讨论】：

标签： vue.js parcel

【解决方案1】：

我想我可以让你的开发服务器运行起来。

我认为 parcel 的默认端口是 1234。所以你需要告诉它在端口 80 上。除非你指定并公开它的 ws 端口，否则热重载也不会工作像这样更改您的包裹包裹运行命令。

{
  ...
  "scripts": {
    "dev": "parcel index.html -p 80 --hmr-port 33333",
  },
}

然后将其添加到您的 Dockerfile 中

...
EXPOSE 33333

这应该允许 parcel 连接到 parcel 开发服务器

【讨论】：