Компиляция Vue CLI Child не удалась после первой сборки, если я не очистил папку .cache

Название вопроса говорит само за себя.

Я использую Vue CLI, и проект отлично компилируется с первого раза. Но если я попытаюсь построить его снова, это не сработает с этой ошибкой:

Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'C:\Users\Oliver\Workspace\academy-residences\public\index.html' in 'C:\Users\Oliver\Workspace\academy-residences':
  Error: Can't resolve 'C:\Users\Oliver\Workspace\academy-residences\public\index.html' in 'C:\Users\Oliver\Workspace\academy-residences'

  - compiler.js:79 childCompiler.runAsChild
    [academy-residences]/[html-webpack-plugin]/lib/compiler.js:79:16

  - Compiler.js:300 compile
    [academy-residences]/[webpack]/lib/Compiler.js:300:11

  - Compiler.js:556 hooks.afterCompile.callAsync.err
    [academy-residences]/[webpack]/lib/Compiler.js:556:14


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [academy-residences]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:553 compilation.seal.err
    [academy-residences]/[webpack]/lib/Compiler.js:553:30


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [academy-residences]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1323 hooks.optimizeAssets.callAsync.err
    [academy-residences]/[webpack]/lib/Compilation.js:1323:35


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [academy-residences]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1314 hooks.optimizeChunkAssets.callAsync.err
    [academy-residences]/[webpack]/lib/Compilation.js:1314:32


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [academy-residences]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1309 hooks.additionalAssets.callAsync.err
    [academy-residences]/[webpack]/lib/Compilation.js:1309:36



[copy-webpack-plugin] unable to locate 'C:\Users\Oliver\Workspace\academy-residences\public' at 'C:\Users\Oliver\Workspace\academy-residences\public'
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: `vue-cli-service build --watch`
npm ERR! Exit status 1
npm ERR!

Однако, если я удалю папку .cache в node_modules, она снова будет правильно построена!

Мой package.json выглядит так:

{
  "name": "academy-residences",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "watch": "vue-cli-service build --watch",
    "test:unit": "vue-cli-service test:unit",
    "heroku-postbuild": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.4.5",
    "moment": "^2.24.0",
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-unit-jest": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.5.21"
  }
}

а вот мой vue.config

module.exports = {
    outputDir: './public',

    publicPath: process.env.NODE_ENV === 'production' ? '' : '',

    configureWebpack: {
        resolve: {
            alias: {
                '@': __dirname + '/ui/src'
            }
        },
        entry: {
            app: './ui/src/main.js'
        }
    }
};

package.json находится в корневой папке проекта со всем исходным кодом vue в пользовательском интерфейсе.

root/
  ui/
    src/
  node_modules/
  package.json

Это недавняя проблема. На днях все работало нормально. Единственное, что, как мне кажется, могло вызвать это, - это удаление @ vue / cli и его переустановка.


webpack npm vue.js vue-cli-3
person Oli    schedule 13.02.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это недавняя проблема. На днях все работало нормально. Единственное, что, как мне кажется, могло вызвать это, - это удаление @ vue / cli и его переустановка.

Что ж, в этом ты прав. До середины 2018 года у меня была структура папок вроде

project
 ├── config
 ├── src // components, router, etc
 ├── static // images, robots.txt manifest, vendor css and whatnot
 ├── dist // not under version control, generated at deploy time
 └── index.html // entry point

При сборке проекта папка dist была очищена, затем фрагменты, поступающие из src, где были скомпилированы в нее, затем статические файлы из static были скопированы в dist (это могло произойти до компиляции файлов src, что угодно).

Моя конфигурация выглядела так:

 new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),

Где config.build.assetsSubDirectory было dist.

Перенесемся в текущий @ vue / cli (по состоянию на март 2019 г.), теперь в шаблоне используется webpack @ 4 вместо webpack @ 3, а некоторые значения по умолчанию были изменены. В частности, они ожидают, что структура будет:

project
 ├── config
 ├── src 
 ├── public //  <── WHAIT!!! NO LONGER CALLED "static"
 |   └── index.html // <── NO LONGER IN ROOT
 └── dist

Итак, в вашей конфигурации объявляя

module.exports = {
    outputDir: './public',
    ...
}

Означает, что вы стираете public во время сборки, тогда webpack не может скопировать ваши общедоступные ресурсы из источника ресурсов по умолчанию в папку вывода, которая стала такой же.

Теперь, если вы проверите, что на самом деле делает webpack (из корневой папки вашего проекта)

vuw inspect > output.js

or 

$(npm bin)/vue-cli-service > output.js

Вы увидите, что у output.js есть блок вроде:

/* config.plugin('copy') */
new CopyWebpackPlugin(
  [
    {
      from: '/home/user/project/public',
      to: '/home/user/project/dist',
      toType: 'dir',
      ignore: [
        '.DS_Store'
      ]
    }
  ]
),

Если я поменял свой vue.config.js на его, как у вас

outputDir: "./public",

Последняя команда выведет раздел, в котором говорится:

/* config.plugin('copy') */
new CopyWebpackPlugin(
  [
    {
      from: '/home/user/project/public',
      to: '/home/user/project/public',
      toType: 'dir',
      ignore: [
        '.DS_Store'
      ]
    }
  ]
),

Что, очевидно, не имеет никакого смысла

TL/DR;

Не используйте public в качестве выходной папки и не ищите способ изменить папку статических ресурсов, для которой, я считаю, вам нужно вручную настроить CopyWebpackPlugin в файле конфигурации vue.

person ffflabs    schedule 30.03.2019