Nuxtjs构建失败,多个资源发射到相同的文件名(anyimage).png

时间:2019-09-13 06:29:09

标签: javascript vue.js webpack config nuxt.js

根据我的知识和提交历史,我的大型nuxt项目突然停止了能够构建或运行dev的工作,没有任何影响构建过程的事情发生了改变。

但是,每次我尝试构建或运行时,都会收到此错误:

During npm run dev:
     Error: Conflict: Multiple assets emit to the same filename (filepath)/(filename).png 

During npm build 
    Error: Conflict: Multiple assets emit to the same filename (img/[hash:7]).png 

()替换为文件名

一旦我对每个require(image.png)和url(image.png)进行注释,此错误就会消失,但这并不是我的问题的答案。

我也尝试注释掉响应式加载器,构建extend(),但无济于事。下面是我的nuxt.config.js和我的package.json

This is my Nuxt.config.js

const pkg = require('./package')
const webpack = require('webpack')
require('dotenv').config()

module.exports = {
  mode: 'universal',

  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#af9bd0',
    height: '3px',
    continuous: true
  },
  generate: {
    routes: [
      '/ads.txt',
    ]
  },
  /*
   ** Global CSS
   */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'swiper/dist/css/swiper.css',
    "assets/css/index.css",
    "assets/css/main.scss",
    'vue-loaders/dist/vue-loaders.css'
  ],

  /*
   ** Plugins to load before mounting the App
   */



  /*
   ** Nuxt.js modules
   */
  modules: [
    ['@nuxtjs/vuetify', {
      treeShake: true
    }],
    '@nuxtjs/pwa',
    '@nuxtjs/device',
    'nuxt-webfontloader',
    '@nuxtjs/axios',
    '@nuxtjs/dotenv',
    '@nuxtjs/svg-sprite',
    '@nuxtjs/style-resources',

    ['nuxt-validate', {
      lang: 'ja',
    }],
    ['@nuxtjs/robots', {
      UserAgent: '*',
      Disallow: '/',
      UserAgent: 'Googlebot',
      Disallow: '',
      UserAgent: 'Yahoo-slurp',
      Disallow: '',
      UserAgent: 'Msnbot',
      Disallow: ''
    }],
    ['@nuxtjs/moment', {
      locales: ['ja'],
      defaultLocale: 'ja'
    }],
    ['@nuxtjs/component-cache', {
      max: 10000,
      maxAge: 1000 * 60 * 60
    }],
    ['@nuxtjs/google-adsense', {
      id: process.env.GOOGLE_ADSENSE_ID,
      pageLevelAds: false,
      test: true,

    }],
    '@nuxtjs/axios',
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [{
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      }, {
        set: '@fortawesome/free-regular-svg-icons',
        icons: ['far']
      }, {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      }]
    }],
    ['@nuxtjs/google-analytics', {
      id: process.env.GOOGLE_ANALYTIC_ID,
      autoTracking: {
        page: true
      }
    }],
    ['@nuxtjs/universal-storage', {
      storage: {
        vuex: true, // boolean or {namespace}
        localStorage: true, // boolean or {prefix }
        cookie: true, // boolean or {prefix, options }
        initialState: {}, // Object {}
        ignoreExceptions: true //
      }
    }],
    ['@nuxtjs/dotenv', {
      /* module options */
    }],
    ['@nuxtjs/recaptcha', {
      siteKey: process.env.RECAPTCHA_KEY,
      version: 2,
      language: 'ja',
      hideBadge: true
    }],
    ['@nuxtjs/toast', {
      position: 'top-right',
      duration: 5000
    }],
    ['nuxt-stripe-module', {
      publishableKey: process.env.STRIPE_KEY,
      version: 'v3', // Default
    }],
    "nuxt-compress",
  ],
  axios: {
    // baseURL: process.env.SERVER_URL + '/v1',
    proxy: true
  },
  proxy: {
    '/v2': {
      target: process.env.NEST_SERVER_URL,
      changeOrigin: true,
      pathRewrite: {
        '^/v2': ''
      }
    },
    '/v1': {
      target: process.env.SERVER_URL,
      changeOrigin: true,
      pathRewrite: {
        '^/v1/': ''
      }
    }

  },

  router: {
    middleware: ['auth'],
    linkActiveClass: 'active-link'
  },

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    analyze: true,
    splitChunks: {
      // name: true,
      // layouts: true,
    },
    optimization: {
      splitChunks: {
        name: true
      }
    }
    filenames: {
      img: ({
        isDev
      }) => isDev ? '[path][name].[ext]' : 'img/[hash:8].[ext]',
    },
    extend(config, ctx) {
      config.module.rules.unshift({
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: 'responsive-loader',
          options: {
            // disable: isDev,
            placeholder: true,
            quality: 85,
            placeholderSize: 30,
            name: 'img/[name].[hash:hex:7].[width].[ext]',
            adapter: require('responsive-loader/sharp'),
          }
        }
      })
      // remove old pattern from the older loader

      config.module.rules.forEach(value => {
        if (Array.isArray(value.use)) {
          value.use.forEach(u => {
            if (u.loader === 'css-loader' && u.options) {
              // delete u.options.minimize;
            }
          });
        }
        if (String(value.test) === String(/\.(png|jpe?g|gif|svg|webp)$/)) {
          // reduce to svg and webp, as other images are handled above
          // value.test = /\.(svg|webp)$/
          // keep the configuration from image-webpack-loader here unchanged
        }
      })
    },

    extractCSS: true,
    styleResources: {
      sass: ['./assets/css/abstracts/main.scss']
    },
    transpile: ['vue-clamp', 'resize-detector', 'lodash-es'],
    postcss: {
      plugins: [
        require('postcss-gap-properties')(),
        require('autoprefixer')({
          grid: true,
          flexbox: true,
          stats: {
            warnings: false
          }
        })
      ]

    },
    // plugins: [new webpack.ProvidePlugin({
    //   $: 'jquery',
    //   jQuery: 'jquery',
    //   'window.jQuery': 'jquery'
    // })]
  },
  server: {
    port: 8080,
    host: '0.0.0.0'
  },
}

package.json

{
  "name": "dafsdaf",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "devHttps": "node server/index.js"
  },
  "dependencies": {
    "@clampy-js/vue-clampy": "^1.0.6",
    "@fortawesome/free-brands-svg-icons": "^5.10.2",
    "@fortawesome/free-regular-svg-icons": "^5.10.2",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@nuxtjs/auth": "^4.8.1",
    "@nuxtjs/axios": "^5.6.0",
    "@nuxtjs/component-cache": "^1.1.5",
    "@nuxtjs/device": "^1.2.3",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/google-adsense": "^1.1.3",
    "@nuxtjs/google-analytics": "^2.2.0",
    "@nuxtjs/moment": "^1.2.0",
    "@nuxtjs/proxy": "^1.3.3",
    "@nuxtjs/pwa": "^2.6.0",
    "@nuxtjs/recaptcha": "^0.5.3",
    "@nuxtjs/robots": "^2.4.0",
    "@nuxtjs/style-resources": "^0.1.2",
    "@nuxtjs/svg-sprite": "^0.2.1",
    "@nuxtjs/toast": "^3.2.1",
    "@nuxtjs/universal-storage": "^0.4.0",
    "@nuxtjs/vuetify": "^0.5.7",
    "@sum.cumo/nuxt-styleguide": "^5.3.0",
    "atob": "^2.1.2",
    "axios": "^0.19.0",
    "browser-image-resizer": "^2.0.1",
    "browserslist": "^4.6.6",
    "caniuse-lite": "^1.0.30000989",
    "cookie": "^0.3.1",
    "cookie-parser": "^1.4.4",
    "cross-env": "^5.2.0",
    "echarts": "^4.2.1",
    "element-ui": "^2.11.1",
    "epic-spinners": "^1.1.0",
    "fstream": "^1.0.12",
    "intersection-observer": "^0.5.1",
    "js-yaml": "^3.13.1",
    "jwt-decode": "^2.2.0",
    "lodash-es": "^4.17.15",
    "mixin-deep": "^2.0.1",
    "moment": "^2.24.0",
    "nuxt": "^2.9.1",
    "nuxt-compress": "^1.0.2",
    "nuxt-fontawesome": "^0.4.0",
    "nuxt-purgecss": "^0.2.1",
    "nuxt-stripe-module": "^2.0.0",
    "nuxt-validate": "^0.1.3",
    "nuxt-webfontloader": "^1.1.0",
    "set-value": "^2.0.1",
    "swiper": "^4.5.0",
    "tar": "^4.4.10",
    "tb-skeleton": "^0.3.6",
    "uuid": "^3.3.3",
    "v-charts": "^1.19.0",
    "v-click-outside-x": "^3.7.1",
    "vee-validate": "^2.2.15",
    "vue": "^2.6.10",
    "vue-awesome-swiper": "^3.1.3",
    "vue-clamp": "^0.2.1",
    "vue-count-to": "^1.0.13",
    "vue-croppa": "^1.3.8",
    "vue-infinite-loading": "^2.4.4",
    "vue-lazy-hydration": "^1.0.0-beta.9",
    "vue-line-clamp": "^1.3.2",
    "vue-loaders": "^2.0.0",
    "vue-match-media": "^1.0.3",
    "vue-observe-visibility": "^0.4.4",
    "vue-pwa-installer": "^0.2.0",
    "vue-scrollama": "^1.1.1",
    "vue-swipe-tab": "^2.0.4",
    "vue-template-compiler": "^2.6.10",
    "vue-text-dot": "^1.0.0",
    "vue-the-mask": "^0.11.1",
    "vue-tiny-lazyload-img": "^0.1.0",
    "vue-zondicons": "^0.1.10",
    "vue2-datepicker": "^2.12.0",
    "vue2-touch-events": "^1.1.2",
    "vuetify-loader": "^1.3.0",
    "vuetify-upload-button": "^1.2.2"
  },
  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "css-loader": "^3.2.0",
    "moment-locales-webpack-plugin": "^1.1.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.19.1",
    "postcss-gap-properties": "^2.0.0",
    "responsive-loader": "^1.2.0",
    "sass-loader": "^7.3.1",
    "sharp": "^0.23.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2"
  }
}

0 个答案:

没有答案