文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Nuxt与Docker:模块未找到:错误:无法解决

问Nuxt与Docker:模块未找到:错误:无法解决
EN

Stack Overflow用户
提问于 2021-04-30 04:49:15
回答 1查看 1.6K关注 0票数 0

我在nuxt中有一个项目，在我的Windows操作系统中，它可以很好地工作，没有停靠程序。我试着将它安装在docker中并运行，但是收到了错误消息：

代码语言：javascript
复制
#9 126.5 ERROR in ./pages/index.vue
#9 126.5 Module not found: Error: Can't resolve './main/index.js?vue&type=script&lang=js&' in '/web/pages'
#9 126.5  @ ./pages/index.vue 2:0-61 3:0-56 3:0-56 10:2-8
#9 126.5  @ ./.nuxt/router.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./pages/index.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./pages/index.vue 4:0-93
#9 126.5  @ ./.nuxt/router.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/shared/Button/Button.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/shared/Button/Button.vue 4:0-70
#9 126.5  @ ./.nuxt/components/plugin.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/shared/Social/Social.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/shared/Social/Social.vue 4:0-70
#9 126.5  @ ./.nuxt/components/plugin.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/shared/Item/Item.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/shared/Item/Item.vue 4:0-92
#9 126.5  @ ./.nuxt/components/plugin.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/partials/SideNav/SideNav.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/partials/SideNav/SideNav.vue 3:0-95
#9 126.5  @ ./.nuxt/components/plugin.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/partials/GroupItem/GroupItem.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/partials/GroupItem/GroupItem.vue 4:0-97
#9 126.5  @ ./pages/index.vue
#9 126.5  @ ./.nuxt/router.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/partials/Info/Info.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/partials/Info/Info.vue 4:0-68
#9 126.5  @ ./.nuxt/components/plugin.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/partials/Banner/Banner.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/partials/Banner/Banner.vue 4:0-94
#9 126.5  @ ./.nuxt/components/plugin.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./pages/invest/invest.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./pages/invest/invest.vue 4:0-94
#9 126.5  @ ./.nuxt/router.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./pages/about/index.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./pages/about/index.vue 4:0-93
#9 126.5  @ ./.nuxt/router.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/elements/Side/Side.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/elements/Side/Side.vue 4:0-92
#9 126.5  @ ./layouts/default.vue
#9 126.5  @ ./.nuxt/App.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5 ERROR in ./components/elements/Header/Header.vue
#9 126.5 Module not found: Error: Can't resolve 'style-loader' in '/web'
#9 126.5  @ ./components/elements/Header/Header.vue 4:0-94
#9 126.5  @ ./layouts/default.vue
#9 126.5  @ ./.nuxt/App.js
#9 126.5  @ ./.nuxt/index.js
#9 126.5  @ ./.nuxt/client.js
#9 126.5  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
#9 126.5
#9 126.5  FATAL  Nuxt build error
#9 126.5
#9 126.5   at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
#9 126.5   at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
#9 126.5   at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
#9 126.5   at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
#9 126.5   at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)
#9 126.5
#9 126.5
#9 126.5    ╭─────────────────────────────╮
#9 126.5    │                             │
#9 126.5    │   ✖ Nuxt Fatal Error        │
#9 126.5    │                             │
#9 126.5    │   Error: Nuxt build error   │
#9 126.5    │                             │
#9 126.5    ╰─────────────────────────────╯
#9 126.5
#9 126.5 npm ERR! code ELIFECYCLE
#9 126.5 npm ERR! errno 1
#9 126.5 npm ERR! pp@1.0.0 build: `nuxt build`
#9 126.5 npm ERR! Exit status 1
#9 126.5 npm ERR!
#9 126.5 npm ERR! Failed at the pp@1.0.0 build script.
#9 126.5 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
#9 126.6
#9 126.6 npm ERR! A complete log of this run can be found in:
#9 126.6 npm ERR!     /root/.npm/_logs/2021-04-30T04_35_12_443Z-debug.log
------
executor failed running [/bin/sh -c apk update && apk upgrade && apk add git python3  &&        rm -rf node_modules &&       rm -rf .nuxt &&         node -v &&      npm install &&  npm audit fix &&    npm run build]: exit code: 1

在这里您可以看到我的项目pages文件夹树视图：

​

​

Nuxt 配置文件代码：

代码语言：javascript
复制
const isDev = process.env.NODE_ENV !== 'production'

export default {
    ssr: true,
    target: 'server', // server or static
    ...(!isDev && { modern: 'server' }),
    head: {
        title: 'Website',
        htmlAttrs: {
            lang: 'en'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: 'Website' }
        ],
        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
    },
    loadingIndicator: {
        name: 'pulse',
        color: '#3B8070',
        background: '#192559'
    },
    css: [
        '@/assets/css/main'
    ],
    styleResources: {
        
    },
    components: {
        dirs: ['@/components', '@/components/elements', '@/components/partials', '@/components/shared']
    },

    buildModules: [
        '@nuxtjs/stylelint-module',
        '@nuxtjs/eslint-module',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/svg',
        '@nuxt/image',
        '@nuxtjs/google-fonts'
    ],

    modules: [
        ['@nuxtjs/component-cache', { maxAge: 1000 * 60 * 15 }],
        'nuxt-ssr-cache',
        '@nuxtjs/axios'
    ],
    image: {
        imgix: {
            baseURL: 'https://assets.imgix.net'
        },
        screens: {
            sm: 568,
            md: 768,
            lg: 1024,
            xl: 1280,
            xxl: 1536
        }
    },
    cache: {
        store: {
            max: 100,
            ttl: 5,
            type: 'multi',
            stores: [{ type: 'memory' /* ... */ }, { type: 'redis' /* ... */ }]
        }
    },
    googleFonts: {
        prefetch: true,
        preconnect: true,
        preload: true,
        families: {
            Manrope: [300, 400, 700, 800]
        },
        display: 'swap'
    },

    router: {
        prefetchLinks: false
    },
    tailwindcss: {
        configPath: '~tailwind.config.js',
        cssPath: '~/assets/css/tailwind.css',
        jit: true, 
        exposeConfig: false 
    },
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        extractCSS: true,
        compressor: true,
        filenames: {
            app: ({ isDev }) => (isDev ? '[name].js' : 'js/[name]-[contenthash].js'),
            chunk: ({ isDev }) => (isDev ? '[name].js' : 'js/[contenthash].js'),
            css: ({ isDev }) => (isDev ? '[name].css' : 'css/[name]-[contenthash:7].css'),
            img: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]'),
            font: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]'),
            video: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]')
        },
        postcss: {
            ...(!isDev && {
                preset: {
                    browsers: 'last 2 versions',
                    autoprefixer: true,
                    grid: true
                }
            })
        },

        optimization: {
            minimize: !isDev
            // runtimeChunk: true
        },
        ...(!isDev && {
            splitChunks: {
                chunks: 'all',
                layouts: true,
                pages: true,
                commons: true,
                automaticNameDelimiter: '.',
                name: true,
                maxInitialRequests: Infinity
            }
        }),
        extend(config, ctx) {
            if (config.resolve.extensions) {
                config.resolve.extensions.push(['', '.js', '.jsx', '.css'])
            } else {
                config.resolve.extensions = ['', '.js', '.jsx', '.css']
            }
            config.resolve.modulesDirectories = ['node_modules']

            // Run ESLint on save
            if (ctx.isDev && ctx.isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/,
                    options: {
                        fix: true
                    }
                })
            }
        }
    }
}

我的项目package.json文件代码：

代码语言：javascript
复制
{
    "name": "we",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "go": "nuxt build && nuxt start",
        "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
        "lint": "npm run lint:js"
    },
    "dependencies": {
        "@nuxt/image": "^0.4.1",
        "@nuxtjs/axios": "^5.13.1",
        "@nuxtjs/component-cache": "^1.1.6",
        "@nuxtjs/style-resources": "^1.0.0",
        "@nuxtjs/stylelint-module": "^4.0.0",
        "@nuxtjs/svg": "^0.1.12",
        "@nuxtjs/tailwindcss": "^4.0.1",
        "core-js": "^3.9.1",
        "node-sass": "^5.0.0",
        "nuxt": "^2.15.3",
        "nuxt-ssr-cache": "^1.5.2",
        "sass-loader": "^10.1.1",
        "swiper": "^5.4.5",
        "vue-awesome-swiper": "^4.1.1",
        "vue-lazy-hydration": "^2.0.0-beta.4"
    },
    "devDependencies": {
        "@nuxt/postcss8": "^1.1.3",
        "@nuxtjs/eslint-config": "^6.0.0",
        "@nuxtjs/eslint-module": "^3.0.2",
        "@nuxtjs/google-fonts": "^1.3.0",
        "@tailwindcss/jit": "^0.1.15",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.22.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-nuxt": "^2.0.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.7.0",
        "nuxt-vite": "^0.0.36",
        "postcss": "^7.0.32",
        "prettier": "^2.2.1",
        "sass": "^1.32.8",
        "stylelint": "^13.13.0",
        "stylelint-config-standard": "^21.0.0"
    }
}

节点版本： v12.18.3

我的index.vue文件从哪里来的错误：

代码语言：javascript
复制
<template>
  <div>
    <h2>Hello World></h2>
  </div>
</template>
<script src="./about.js" />
<style lang="postcss" scoped>
@import './css/History.css';
@import './css/Mission.css';
@import './css/Strategy.css';
@import './css/Team.css';
@import './css/Trust.css';
</style>

我的Dockerfile源代码：

代码语言：javascript
复制
FROM node:12.19.0-alpine3.12

ENV APP_ROOT /web
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}


RUN rm -rf node_modules && \
    rm -rf .nuxt && \
    node -v && \
    npm install && npm i eslint-webpack-plugin && npm install style-loader --save \
    npm audit fix && \
    npm run build

CMD ["npm", "run", "start"]

为什么我在码头上会犯这样的错误？

webpack
nuxt.js
javascript
docker
vue.js
EN

回答 1

Stack Overflow用户

发布于 2021-04-30 05:51:51

这里的问题似乎是关于style-loader库，在运行您的容器时没有意识到这一点。

更深入地研究一下，我注意到您将&&忘在安装它的行(在您的dockerfile上)。

另外，也不确定是否有原因，但为了一致性，我会在package.json上列出所有的依赖项，这意味着我将直接在json上移动eslint-webpack-plugin和style-loader，这样项目也会与这些库一起运行。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67328341

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档