VueJS项目Docker部署白屏及npm安装node-sass报错求助

问题1：Docker构建后白屏，提示需启用JavaScript（实际已启用） #

可能原因及解决方法： #

• Vue项目publicPath配置错误
  检查项目根目录的vue.config.js，确保publicPath匹配部署路径。如果是Nginx根目录部署，配置应为：

  module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
  }
  

• Nginx缺少单页应用路由支持
  默认Nginx配置无法处理Vue前端路由，需添加try_files指令重写请求。修改Dockerfile并添加自定义Nginx配置：

  # production stage
  FROM nginx:stable-alpine as production-stage
  # 复制自定义配置覆盖默认Nginx配置
  COPY ./nginx.conf /etc/nginx/conf.d/default.conf
  COPY --from=builder /app/dist /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

  对应的nginx.conf内容：

  server {
      listen 80;
      server_name localhost;
  
      root /usr/share/nginx/html;
      index index.html index.htm;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

• 验证dist目录完整性
  构建后进入builder容器，检查/app/dist下是否包含完整的静态文件（js、css、index.html等），命令示例：

  docker run --rm -it <builder-image-id> ls /app/dist
  

问题2：使用node:lts-alpine构建时npm install报错（node-sass找不到Python2.7） #

原因： #

旧版本node-sass依赖Python 2.7，且与Node.js 18+版本不兼容；同时alpine镜像默认未安装Python 2.7及编译依赖。

解决方法： #

• 长期方案：升级为dart-sass
  node-sass已被弃用，推荐替换为官方维护的sass（dart-sass）：

  npm uninstall node-sass
  npm install sass --save-dev
  

  项目中引用路径无需大幅修改，sass兼容node-sass的API。
• 临时方案：安装编译依赖
  若暂时无法升级，可在builder阶段安装Python 2.7及编译工具：

  # build stage
  FROM node:lts-alpine as builder
  WORKDIR /app
  # 安装Python2.7、gcc、make等编译依赖
  RUN apk add --no-cache python2 make g++
  COPY ./growth-tracker-web-client/package*.json ./
  RUN npm install --force
  COPY ./growth-tracker-web-client .
  RUN npm run build
  

内容的提问来源于stack exchange，提问作者mohammad karimi