第一次构建后，Vue CLI子编译失败，除非我清除.cache文件夹

Question

问题的标题说明了一切。

我正在使用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位于项目的根文件夹中，包含ui中的所有vue源代码

root/
  ui/
    src/
  node_modules/
  package.json

这是最近的一个问题。前几天一切正常。我认为唯一可能导致这种情况的是删除@ vue / cli并重新安装它。

Answer 1

这是最近的一个问题。前几天一切正常。我认为唯一可能导致这种情况的是删除@ 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年3月），模板现在使用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

要么

$(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作为输出文件夹，或者找到更改静态资产文件夹的方法，我相信你必须在你的vue配置文件中手动配置CopyWebpackPlugin。