Vue3+Vite项目Docker+Nginx生产环境@formkit/vue模块解析失败求助

核心原因 #

@formkit/vue被错误归类到devDependencies中，生产环境构建时不会安装开发依赖，导致部署后浏览器无法解析该模块。本地开发模式会加载所有依赖，因此运行正常。

具体解决方法 #

1. 调整依赖位置
   将@formkit/vue从devDependencies迁移到dependencies，修改后的package.json依赖配置如下：

   "dependencies": {
       "insane": "^2.6.2",
       "marked": "^4.1.0",
       "moment": "^2.29.4",
       "pinia": "^2.0.22",
       "vue": "^3.2.39",
       "vue-final-modal": "4.0.1",
       "vue-i18n": "^9.2.2",
       "vue-router": "^4.1.5",
       "@formkit/vue": "^1.0.0-beta.12"
     },
     "devDependencies": {
       "@cypress/vue": "^4.2.0",
       "@intlify/unplugin-vue-i18n": "^0.8.1",
       "@mutoe/eslint-config-preset-vue": "~1.4.0",
       "@pinia/testing": "^0.0.14",
       "@testing-library/cypress": "^8.0.3",
       "@types/marked": "^4.0.7",
       "@vitejs/plugin-vue": "^3.1.0",
       "@vue/tsconfig": "^0.1.3",
       "autoprefixer": "^10.4.13",
       "concurrently": "^7.4.0",
       "cypress": "^10.8.0",
       "eslint": "^8.23.1",
       "eslint-plugin-cypress": "^2.12.1"
    },
   

2. 重新安装依赖并构建生产包
   执行以下命令更新依赖并生成生产构建文件：

   # 清理旧依赖文件
   rm -rf node_modules package-lock.json
   # 重新安装完整依赖
   npm install
   # 构建生产环境包
   npm run build
   

3. 检查Docker构建流程
   确保Dockerfile中安装依赖的步骤基于修改后的package.json执行，若使用生产环境安装参数需确认依赖已在dependencies中，示例Dockerfile片段：

   # 安装生产环境依赖
   RUN npm ci --only=production
   # 将构建产物复制到Nginx静态目录
   COPY dist /usr/share/nginx/html
   

完成上述步骤后，重新构建Docker镜像并部署，即可解决模块解析错误。

内容的提问来源于stack exchange，提问作者Quang Hoang Duc